js绑定事件和解除事件

绑定事件三种方法，
第一种，

<div style="width: 100px;height: 100px;background-color:red;"></div>var div =document.getElementsByTagName('div')[0];div.onclick=function(){console.log('a')console.log(this)}//this本应该指向div元素,但是这里并没有指向dom本身，而且他不被读取div.onclick=function(){console.log('b')}//b 对一个元素绑定两个这样的事件时,后者会覆盖前者

第二种方法,obj.addEventListener(事件类型,事件函数,flase)
这个方法可以为同一个dom元素绑定多个事件

  div.addEventListener('click',function(){console.log('a')console.log(this)//this指向自身},false)div.addEventListener('click',function(){console.log(this)console.log(a)},false)//a a

第三种方法,obj.attachEvent(‘on’+type,fn) 只有ie支持,其他浏览器不支持

    div.attachEvent('onclick',function(){console.log(this)})//this指向window,但是我用ie也不识别该函数

2,点击li按顺序输出li序号事件

     <ul><li>a</li><li>a</li><li>a</li></ul>

 var li=document.getElementsByTagName('li');for(let i=0;i<=li.length-1;i++){li[i].addEventListener('click',function(){console.log(i)},false)//如果用var而不是let,那么点击任何一个li都会是3var li=document.getElementsByTagName('li');for(var i=0;i<=li.length-1;i++){(function(i){li[i].addEventListener('click',function(){console.log(i)},false)}(i))}//闭包也可以处理//封装一个兼容各个浏览器的绑定事件函数function addEvent(element , type,handle){if(element.addEventListener){                        element.addEventListener(type,handle,false);}else if(element.attachEvent){                        element.attachEvent("on"+type,function(){handle.call(element)})}else{element['on'+type]=handle}
}

3解除事件

div.onclick=null

 1       div.onclick=function(){console.log('b')this.onclick=null;}//只生效一次的点击事件2      div.addEventListener=function text(){console.log('b')}div.removeEventListener('click',text , false)3          ele.detachEvent('on'+type,fn);如果绑定匿名函数,则无法解除

js绑定事件和解除事件相关推荐

jquery-绑定事件与解除事件的绑定
考点事件绑定,标签对象直接绑定事件标签对象.事件(匿函) 例子: $("#btn").click(匿函)事件绑定,通过绑定的方法实现标签对象.bind("事件名称& ...
js屏蔽事件和解除事件
屏蔽事件: 屏蔽选中.双击复制该方法仅能屏蔽元素外的值: document.onselectstart = function() {return false; } 屏蔽选中.双 ...
html触发js参数怎么用,js 绑定带参数的事件以及手动触发事件
1.html代码标题一标题二标题三标题四 div> 内容一内容二内容三内容四 2 .js部分 var tab = document.getElementById("tab ...
html js绑定键盘按键触发事件(按回车键登陆)
document.onkeydown =cdk; function cdk(){ if(event.keyCode ==13){submit();} } 13代表的是回车键,说明在页面中按下回车键,执 ...
JavaScript解除事件绑定处理程序 js事件绑定解除
//参考 https://mp.csdn.net/postedit/90524536 JavaScript 事件绑定封装一个兼容性事件绑定方法应需求有时候事件绑定触发后就要接触事件. 解除事件绑定方 ...
原生js绑定和解除事件
// 事件绑定this.bindHandler = (function() {if (window.addEventListener) {// 标准浏览器return function(elem, t ...
JS中事件绑定的方式以及事件监听和事件的委托
在javascript中,到我目前的学习中总结得到的认知是在事件触发阶段主要是由于事件流: 我们在HTML中先设置一个div: <div class="box">< ...
[JQuery 学习笔记] 解除事件绑定 unbind()
unbind() : 解除事件绑定 <!DOCTYPE html> <html lang="en"> <head><meta chars ...
事件绑定及解除事件绑定
事件绑定的方式 1) ele.onXXX = function(event) {}this 指向 dom 2) ele.addEventListener(type, fn, false);一个事件可以 ...

js绑定事件和解除事件

js绑定事件和解除事件相关推荐

最新文章

热门文章