> 文档中心 > js BOM DOM部分基础知识学习笔记(2)

js BOM DOM部分基础知识学习笔记(2)

目录

JavaScript_CSS操作

HTML 元素的 style 属性

元素节点的style属性

cssText属性

JavaScript_事件处理程序

DOM0级事件处理

DOM2级事件处理

IE事件处理程序

JavaScript_事件类型之鼠标事件

常见事件类型

事件注意事项

 JavaScript_事件流

事件冒泡

事件捕获

JavaScript_Event事件对象

Event对象方法

事件类型之键盘事件

event对象

JavaScript_事件类型之表单事件

select事件

Change 事件

reset 事件,submit 事件

JavaScript_事件类型之窗口事件

JavaScript_事件类型之焦点_剪切板事件

剪贴板事件

JavaScript_网页状态事件

DOMContentLoaded 事件

JavaScript_Touch事件

 JavaScript_事件代理(事件委托)


JavaScript_CSS操作

HTML 元素的 style 属性

操作 CSS 样式最简单的方法,就是使用网页元素节点的setAttribute方法直接操作网页元素的style属性

div.setAttribute(  'style',  'background-color:red;' + 'border:1px solid black;');

元素节点的style属性

var divStyle = document.querySelector('div').style;divStyle.backgroundColor = 'red';divStyle.border = '1px solid black';divStyle.width = '100px';divStyle.height = '100px';divStyle.fontSize = '10em';

cssText属性

var divStyle = document.querySelector('div').style;divStyle.cssText = 'background-color: red;'  + 'border: 1px solid black;'  + 'height: 100px;'  + 'width: 100px;';
            Document     .active{     font-size: 30px;     color: red; }        
hello
var root = document.getElementById("root"); // root.setAttribute("style","color:green;width:300px;height:50px;background:red;") // root.style.color="red"; // root.style.width="300px"; // root.style.border="1px solid red"; // root.style.backgroundColor="green"; // root.style.fontSize="20px";//HTML:font-size 和 JS:fontSize // root.style.cssText="color:red;border:1px solid red;width:300px"; // root.setAttribute("class","active"); root.classList.add("active");

JavaScript_事件处理程序

事件处理程序分为:

  • HTML事件处理
  • DOM0级事件处理
  • DOM2级事件处理
  • IE事件处理

 HTML事件

      Js事件详解--事件处理         HTML 和 js 不分离  
function demo(){ alert("hello html事件处理"); } //移除事件 function demo(){ }

DOM0级事件处理

    HTML 和 JS 分离了    
var btn1=document.getElementById("btn1"); btn1.onclick=function(){alert("Hello DOM0级事件处理程序1");}//被覆盖掉 btn1.onclick=function(){alert("Hello DOM0级事件处理程序2");} //移除事件 btn1.onclick=null;

DOM2级事件处理

    
var btn1=document.getElementById("btn1"); btn1.addEventListener("click",demo1); btn1.addEventListener("click",demo2); btn1.addEventListener("click", function(){ alert("DOM2级事件处理程序2")//移除不了 和下面那个不是一个东西 }); btn1.addEventListener("click",demo3); function demo1(){ alert("DOM2级事件处理程序1") } function demo2(){ alert("DOM2级事件处理程序2") } function demo3(){ alert("DOM2级事件处理程序3") } btn1.removeEventListener("click",demo2); btn1.removeEventListener("click",function(){ alert("DOM2级事件处理程序2")//移除不了,必须单独写 });

IE事件处理程序

IE实现了与DOM中类似的两个方法:attachEvent()detachEvent()

JavaScript_事件类型之鼠标事件

常见事件类型

  • 鼠标事件
  • 键盘事件
  • 表单事件
  • 窗口事件
  • 焦点/剪贴板事件
  • 网页状态事件
  • Touch事件

 鼠标事件

鼠标事件指与鼠标相关的事件,具体的事件主要有以下一些

  1. click:按下鼠标时触发
  2. dblclick:在同一个元素上双击鼠标时触发
  3. mousedown:按下鼠标键时触发
  4. mouseup:释放按下的鼠标键时触发
  5. mousemove:当鼠标在节点内部移动时触发。当鼠标持续移动时,该事件会连触发。
  6. mouseenter:鼠标进入一个节点时触发,进入子节点不会触发这个事件
  7. mouseleave:鼠标离开一个节点时触发,离开父节点不会触发这个事件
  8. mouseover:鼠标进入一个节点时触发,进入子节点会再一次触发这个事件
  9. mouseout:鼠标离开一个节点时触发,离开父节点也会触发这个事件
  10. wheel:滚动鼠标的滚轮时触发
var btn1 = document.getElementById("btn1");btn1.onclick = function(){    console.log("click事件");}

事件注意事项

  1. 这些方法在使用的时候,除了DOM2级事件,都需要添加前缀on
  2. click事件指的是,用户在同一个位置先完成mousedown动作,再完成mouseup动作。因此,触发顺序是,mousedown首先触发,mouseup接着触发,click最后触发。
  3. dblclick事件则会在mousedown、mouseup、click之后触发。
  4. mouseover事件和mouseenter事件,都是鼠标进入一个节点时触发。两者的区别是,mouseenter事件只触发一次,而只要鼠标在节点内部移动,mouseover事件会在子节点上触发多次。

 JavaScript_事件流

事件流描述的是从页面中接受事件的顺序,但有意思的是,微软(IE)和网景(Netscape)开发团队居然提出了两个截然相反的事件流概念,IE的事件流是事件冒泡流(event bubbling),而Netscape的事件流是事件捕获流(event capturing)

事件冒泡

IE提出的事件流叫做事件冒泡,即事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的节点

        Title   
function p(){ console.log('p标签被点击') } function btn(){ console.log("button被点击") } function divClick(event){ console.log('div被点击'); }function bodyClick(){ console.log('body被点击') }

事件捕获

事件捕获流的思想是不太具体的DOM节点应该更早接收到事件,而最具体的节点应该最后接收到事件

        Title
var oP=document.querySelector('p'); var oB=document.querySelector('button'); var oD=document.querySelector('div'); var oBody=document.querySelector('body'); oP.addEventListener('click',function(){ console.log('p标签被点击') },true); oB.addEventListener('click',function(){ console.log("button被点击") },true); oD.addEventListener('click', function(){console.log('div被点击') },true); oBody.addEventListener('click',function(){ console.log('body被点击') },true);事件捕获:(只能采用DOM2级事件处理程序)                DOM2级别事件addEventListener("type",callback,boolean)                    boolean:                            true:事件捕获                            false:默认值是false,代表事件冒泡

JavaScript_Event事件对象

 Event对象属性

  1. Event.currentTarget(指向事件监听者,即谁添加的事件指向谁)
  2. Event.Target(事件真正的触发者即谁触发的事件指向谁)
  3. Event.type

 Event.currentTarget

Event.currentTarget属性返回事件当前所在的节点,即正在执行的监听函数所绑定的那个节点

btn.onclick = function(e){   console.log(e.currentTarget);}

Event.target

Event.target属性返回原始触发事件的那个节点,即事件最初发生的节点。事件传播过程中,不同节点的监听函数内部的Event.target与Event.currentTarget属性的值是不一样的,前者总是不变的,后者则是指向监听函数所在的那个节点对象

// HTML代码为// 

Hello World

para = document.getElementById("para") function hide(e) { console.log(this === e.currentTarget); // 总是 true console.log(this === e.target); // 有可能不是 true e.target.style.visibility = 'hidden';} para.addEventListener('click', hide, false);

Event.type

Event.type属性返回一个字符串,表示事件类型。事件的类型是在生成事件的时候。该属性只读

Event对象方法

  1. Event.preventDefault()
  2. Event.stopPropagation()

Event.preventDefault

Event.preventDefault方法取消浏览器对当前事件的默认行为。比如点击链接后,浏览器默认会跳转到另一个页面,使用这个方法以后,就不会跳转了

btn.onclick = function(e){    e.preventDefault(); // 阻止默认事件    console.log("点击A标签");}

 Event.stopPropagation()

stopPropagation方法阻止事件在 DOM 中继续传播,防止再触发定义在别的节点上的监听函数,但是不包括在当前节点上其他的事件监听函数

btn.onclick = function(e){    e.stopPropagation(); // 阻止事件冒泡    console.log("btn");}

事件类型之键盘事件

键盘事件由用户击打键盘触发,主要有keydown、keypress、keyup三个事件

  1. keydown:按下键盘时触发。
  2. keypress:按下有值的键时触发,即按下 Ctrl、Alt、Shift、Meta 这样无值的键,这个事件不会触发。对于有值的键,按下时先触发keydown事件,再触发这个事件。
  3. keyup:松开键盘时触发该事件
//HTML var username = document.getElementById("username");username.onkeypress = function(e){    console.log("keypress事件");}

event对象

keyCode:唯一标识

//HTML var username = document.getElementById("username");username.onkeydown = function(e){    if(e.keyCode === 13){ console.log("回车");    }}

JavaScript_事件类型之表单事件

 表单事件是在使用表单元素及输入框元素可以监听的一系列事件

  1. input事件
  2. select事件
  3. Change事件
  4. reset事件
  5. submit事件

 input事件

input事件当、、