泉州网站制作企业,网站改版 百度影响,山东省最新消息今天,如何编辑微信小程序事件类型分类#xff1a; 1 添加在html结构中的事件 div iddiv1 onclickalert(append click event in html) /div 点击div1之后弹出 append click event in html#xff1b;其实在html结构中添加的事件也属于dom0级事件。 2 dom0级事…事件类型分类 1 添加在html结构中的事件 div iddiv1 onclickalert(append click event in html) /div 点击div1之后弹出 append click event in html其实在html结构中添加的事件也属于dom0级事件。 2 dom0级事件处理 div iddiv1 /div
scriptvar dom1 document.getElementById(div1);dom1.onclick function(){alert( first dom0 )};dom1.onclick function(){alert( second dom0 )};
/script 点击div1之后只弹出 second dom0说明dom0级事件后面赋值的事件会覆盖掉前面的 如果在div中在加 onclickalert(append click event in html), 代码如下 div iddiv1 onclickalert(append click event in html) /div
scriptvar dom1 document.getElementById(div1);dom1.onclick function(){alert( first dom0 )};dom1.onclick function(){alert( second dom0 )};
/script 点击div后 仍然只弹出second dom0 说明在html中添加的点击事件处理程序也被覆盖。 实际上 dom1.onclick 等价于html结构中div标签中的οnclick; 可以把onclick看成dom元素对象的一个属性 dom1{ id1, onclickfunction(){ ... } } 3 dom2级事件处理 dom.addEventListener“事件名”“事件处理程序”“布尔值” 布尔值表示该事件的响应顺序,默认值为false。 true事件捕获表示在捕获阶段调用事件处理程序。 false事件冒泡表示在冒泡阶段调用事件处理程序。 事件传递有两种方式冒泡与捕获。 事件传递定义了元素事件触发的顺序。 如果你将 p 元素插入到 div 元素中用户点击 p 元素, 哪个元素的 click 事件先被触发呢 在 冒泡 中内部元素的事件会先被触发然后再触发外部元素即 p 元素的点击事件先触发然后会触发 div 元素的点击事件。 在 捕获 中外部元素的事件会先被触发然后才会触发内部元素的事件即 div 元素的点击事件先触发 然后再触发 p 元素的点击事件。 关于事件冒泡和捕获在后面再举出实例代码。 使用addEventListener添加事件不会被覆盖也不会覆盖dom0级事件如下 div iddiv1 onclickalert(append click event in html) /div
scriptvar dom1 document.getElementById(div1);var handle function () {alert(dom2 event handle);};dom1.onclick function(){alert( first dom0 )};dom1.onclick function(){alert( second dom0 )};dom1.addEventListener(click, function(){alert( first dom2 )}, false);dom1.addEventListener(click, handle, false);
/script 点击div1时弹出 second dom0、first dom2 、dom2 event handle dom0级绑定的最后一个事件覆盖了前面所有的dom0级事件而绑定的两个dom2级事件都存在,并且先执行dom0级事件在执行dom2级事件。 使用removeEventListener移除事件传入的参数与添加处理程序时addEventListener使用的参数相同。 这也意味着事件处理程序为匿名函数的无法移除如下所示 div /div
scriptvar dom1 document.getElementById(div1);var handle function () {alert(event handle);};dom1.addEventListener(click, function(){alert( first dom2 )}, false);dom1.addEventListener(click, function(){alert( second dom2 )}, false);dom1.addEventListener(click, handle, false);dom1.removeEventListener(click, handle, false);dom1.removeEventListener(click, function(){alert( second dom2 )}, false);
/script 点击div1依次弹出 first dom2 、second dom2 关于事件冒泡和捕获的代码实例 div iddiv1div iddiv2div iddiv3div iddiv4/div/div/div/div
scriptvar html document.getElementsByTagName(html)[0];var body document.getElementsByTagName(body)[0];var dom1 document.getElementById(div1);var dom2 document.getElementById(div2);var dom3 document.getElementById(div3);var dom4 document.getElementById(div4);window.addEventListener(click, function(){alert(window)}, false);document.addEventListener(click, function(){alert(document)}, true);html.addEventListener(click, function(){alert(html)}, false);body.addEventListener(click, function(){alert(body)}, true);dom1.addEventListener(click, function(){alert(div1)}, false);dom2.addEventListener(click, function(){alert(div2)}, true);dom3.addEventListener(click, function(){alert(div3)}, false);dom4.addEventListener(click, function(){alert(div4)}, false);// addEventListen 添加的第三个参数true则是事件捕获,不添加或false则为事件冒泡 由事件源dom4元素 -- 父元素dom3 -- 爷爷元素dom2 -- ... -- body -- html -- document -- window 执行事件处理程序// 若从事件源dom4元素到window 有存在事件捕获的绑定事件 则事件从window到事件源dom4 依次执行完设置为true的捕获事件 在从事件源dom到window执行完其他未设置为true的冒泡事件。//如上述代码 依次弹出 document body div2 div4 div3 div1 html window
/script 注意IE8及更早IE版本Opera7.0及其更早版本不支持 addEventListener() 和 removeEventListener() 方法。 对于这类浏览器版本可以使用 attachEvent() 方法来添加事件detachEvent() 方法来移除事件句柄 事件对象在触发dom事件的时候都会产生一个事件对象 事件对象event 1 type获取事件类型 2 target获取事件目标 3 stopPropagation阻止事件冒泡 4 preventDefault阻止事件默认行为 div iddiv1 /div
scriptvar dom1 document.getElementById(div1);dom1.addEventListener(click,function(event){console.log(event.type);console.log(event.target)})
/script console.log 输出 click , div iddiv1 /div diva/a/div
scriptdom_div.addEventListener(click,fun_div)dom_a.addEventListener(click,fun_a)
/script 点击a时触发fun_a 由于事件冒泡再触发fun_div 在fun_a的末尾添加event.stopPropagation阻止事件冒泡 则div中的click事件fun_div无效 a hrefhttp://www.baidu.com/a dom_1.addEventListener(click,function(event){}) 点击之后a会跳转到百度 在回调函数function中添加event.preventDefault;阻止事件默认行为 点击之后不会跳转 转载于:https://www.cnblogs.com/peakleo/p/6090385.html
