一.事件机制 2.事件绑定 6）addEventListener的第三个参数 false:冒泡; true:捕获; IE的attachEvent没有第三个参数，所以就不说了
冒泡:从最内层标签开始执行事件，逐层向外，直到执行到document的事件 捕获:一个事件从document开始执行，逐层向内层标签执行，最后执行事件触发的标签
注意:必须是相同的事件; 案例:(01.冒泡.html); 结构 <body> <div id="box"> <p>我是</p> </div> <body> js:点击段落，依次弹出提示框如下: (我是p的绑定事件) (我是div的绑定事件) (我是body的绑定事件) (我是document的点击事件) 案例:(02.捕获.html) 结构 <body> <div id="box"> <p>我是</p> </div> <body> js:点击段落，依次弹出提示框如下: (我是document的点击事件) (我是body的绑定事件) (我是div的绑定事件) (我是p的绑定事件) 7）阻止冒泡 标准浏览器阻止冒泡 事件对象.stopPropagaton(); Propagaton:传送、传播 事件对象：当出发时间是会自动创建一个事件对象，通过实践对象可以访问很多信息，比如获取事件源、鼠标/页面的坐标等等。 如： p.addEventListener('click',function(event)){
},false; 参数event就是事件对象 IE低版本浏览器阻止冒泡 获取事件对象 var e =window.event; e.cancelBubble = true; 封装阻止冒泡的兼容函数 function stopBubble(evt){ //evt被识别就是标准浏览器，就会返回evt给event变量，如果evt不能识别就是IE低版本浏览器，就会吧window.event给event变量 var event = evt || window.event; if(event.stopPropagation){ event.stopPropagation(); }else{ event.cancelBubble = true; } }
p.addEventListener('click', function(event){ alert('我是p的绑定事件'); stopBubble(event); },false); 案例:(03.阻止冒泡.html) 阻止01案例的冒泡行为 1）只实现标准浏览器的 2）只实现低版本的 3）实现浏览器兼容的。二.事件对象event 任何事件在触发的时候，在事件处理函数中会自动生成一个事件对象event，这个event对象包含了所有与事件相关的信息， 比如:事件源是谁，事件是什么，鼠标的位置，键盘按键是谁等等信息。
event事件对象的获取： 1.标准浏览器:它是事件处理函数中的形式参数(名称不定)，例如：e 2.IE低版本浏览器:window的一个event属性，格式固定，window.event。 div.onclick = function(evt){ // 兼容 var event = evt ||window.event; console.log(event); } 案例:(04.事件对象.html) 单击body，在控制台输出事件对象 1）标准浏览器输出 2）IE低版本浏览器输出 单击document，再控制台输出事件对象 3)兼容的写法
使用event对象获取事件源 event.target || event.srcElement IE下，event对象有srcElement属性，但是没有target属性FireFox下，event对象有target属性，但是没有srcElement属性 Chrome下，event对象有target属性，也有srcElement属性。这两个都能得到事件源。
案例:(05.event对象获取事件源.html) 结构: <div id="box">点击</div> <input type="button" value="btn" id="btn"> js: 1)单击div，控制台输出事件对象及三个事件源对象 2）单击按键，控制台输出事件对象及四个事件源对象 要求:事情对象及事件源的获取需要实现浏览器兼容性
使用event阻止浏览器的默认行为 超链接，在单击的时候，打开新页面是默认事件 表单，有提交数据到服务器的默认事件 有时候，我们需要阻止默认事件 1.DOM0 在事件处理函数的最后或者当满足一定条件的时候，加return false了;就会阻止默认事件 2标准浏览器 通过实践对象的preventDefault() 方式阻止默认事件 事件对象.preventDefault(); 3.IE低版本浏览器 通过设置事件对象returnValue属性值来阻止默认事件 事件对象.returnValue = false; 兼容写法： 封装阻止默认事件的兼容函数 function prevent(evt){ var event = evt || window.event; if(event.preventDefault){//标准浏览器 event.preventDefault(); }else if(event.returnValue){//IE低版本 event.returnValue = false; }else{//以上浏览器皆不是 return false; } }
案例:(06.阻止默认事件.html) 结构: 超链接 输入框 提交按钮 js： 1)阻止超链接、表单提交、右键的默认事件 2）实现浏览器的兼容
转载于:https://www.cnblogs.com/yangjingyang/p/10210465.html
