JS中事件绑定

事件绑定

事件绑定

IE方式

attactEvent(事件名称,函数),绑定事件处理函数

derachEvent(事件名称,函数),解除绑定

DOM方式

addEventListener(事件名称,函数,捕获)

removeEventListener(事件名称,函数,捕获)

绑定事件代码:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<script>

window.onload=function()

{

var oBtn=document.getElementById('btn1');

oBtn.attachEvent('onclick',function()

{

alert('a')

});

oBtn.attachEvent('onclick',function()

{

alert('b')

});

}

</script>

</head>

<body>

<input id="btn1" type="button" value="按钮" />

</body>

</html>

以上代码使用了attactEvent(事件名称,函数),绑定事件处理函数 注意(事件名称前面加on)

只能在IE里面用,在别的浏览器会报错

使用addEventListener(事件名称,函数,捕获)的代码 注意事件名称前面不加on

这个只能使用于火狐 chrome 和IE9浏览器 在IE7会报错

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<script>

window.onload=function()

{

var oBtn=document.getElementById('btn1');

oBtn.addEventListener('click',function()

{

alert('a')

});

oBtn.addEventListener('click',function()

{

alert('b')

});

}

</script>

</head>

<body>

<input id="btn1" type="button" value="按钮" />

</body>

</html>

有2个方法绑定事件

分别是

IE方式

attactEvent(事件名称,函数),绑定事件处理函数

DOM方式

addEventListener(事件名称,函数,捕获)

他们2个都只能使用于一种浏览器,

可以用if解决兼容问题

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<script>

window.onload=function()

{

var oBtn=document.getElementById('btn1');

if(oBtn.attachEvent)

{

oBtn.attachEvent('onclick',function()

{

alert('a')

});

oBtn.attachEvent('onclick',function()

{

alert('b')

});

}else

{

oBtn.addEventListener('click',function()

{

alert('a')

});

oBtn.addEventListener('click',function()

{

alert('b')

});

}

}

</script>

</head>

<body>

<input id="btn1" type="button" value="按钮" />

</body>

</html>

如果以后用绑定很麻烦,可以把绑定写一个函数,以后我们用直接调用就可以了

function myAddevent(obj,ev,fn)

{

if(obj.attachEvent)

{

obj.attachEvent('on'+ev,fn)

}else

{

obj.addEventListener(ev,fn,false);

}

}

上面是编写好的绑定函数,我下面来调用

window.onload=function()

{

var oBtn=document.getElementById('btn1');

myAddevent(oBtn,'click',function()

{

alert('a')

})

myAddevent(oBtn,'click',function()

{

alert('b')

})

}

2事件捕获

a.setCapture()把网页所有事件全部集中到a里

a.releaseCapture()解除上面的捕获事件

时间: 2024-10-29 13:11:37

JS中事件绑定的相关文章

笔记-[6]-js中事件绑定方法的总结

js中的两种对象事件绑定方法: 1:常用的如:div.onclick=function(){...}; 2:通过系统方法绑定事件: 非IE:addEventListener('事件名[不加on]',function(){},false[或者true]) IE:attachEvent('事件名[加on]',function(){}); 通过系统方法绑定事件可以让对象可以绑定相同的事件并且执行不同的操作,如果使用第一种方法绑定多个相同的事件,最后一个事件会覆盖前面所有的事件. 在addEventLi

JS中事件绑定的三种方式

以下是搜集的在JS中事件绑定的三种方式. 1. HTML onclick attribute <button type="button" id="upload" onclick="upload_file();"> 原文: http://www.w3school.com.cn/jsref/jsref_events.asp 2. jQuery .on() $(node).on("change", function(e)

JS基础——事件绑定

上一篇博客JS事件对象中,老师问JS事件处理和VB中的事件处理有什么联系?先来解决一下这个问题.举个VB.net中事件处理的例子(JS敲久了,VB习惯的都不熟悉了,看来得经常回顾了): 1.事件处理VB VS JS Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click MsgBox("helo!") MsgBox(sender.width) '弹出触发这个事件对象的宽度 Msg

jQuery中事件绑定

一.前言 最近在做项目中要用到jQuery来绑定事件,首先想到的是$(selector).事件名();这样绑定事件的方式,这种方式对事件进行绑定其实也就是bind()方法,但当选择器匹配的元素过多,$(selector).事件名();对每个元素进行迭代绑定,会影响性能.除了这种方式可以绑定事件以外,还有live()(已过期).delegate().on()方法绑定事件,接下来分析一下它们的区别,以及使用哪种方式最值得推荐.由于live()方法已过期,只分析另外三种,欢迎拍砖.吐槽~~~ 二.用法

JS中事件代理与委托

在javasript中delegate这个词经常出现,看字面的意思,代理.委托.那么它究竟在什么样的情况下使用?它的原理又是什么?在各种框架中,也经常能看到delegate相关的接口.这些接口又有什么特殊的用法呢?这篇文章就主要介绍一下javascript delegate的用法和原理,以及Dojo,jQuery等框架中delegate的接口. JavaScript事件代理 首先介绍一下JavaScript的事件代理.事件代理在JS世界中一个非常有用也很有趣的功能.当我们需要对很多元素添加事件的

JS中事件的执行顺序和AJAX的异步

之前了解过异步和同步,知道同步是顺序执行,异步是同时执行,但是没有遇到过这种情况,不是很理解,这两天做项目突然遇到了,对这有了一个初步的认识.废话不多说,直接上要求. 1.项目要求:外部调用xml文件,然后JS动态生成下拉菜单,使多个文件同时使用此菜单,方便维护. 如图,下面白色为以前的菜单,但是多个地图都需要写同样的菜单比较麻烦,也不好修改,所以做一个xml文件,存储菜单内容,然后多个地图调用,容易修改,蓝色部分菜单. 2.项目代码:此处我使用的Jquery addMenu(){ $.ajax

JS的事件绑定、事件流模型

.t1 { background-color: #ff8080; width: 1100px; height: 40px } 一.JS事件 (一)JS事件分类 1.鼠标事件:click/dbclick/mouseover/mouseout2.HTML事件: onload/onunload/onsubmit/onresize/onchange/onfoucs/onscroll3.键盘事件: keydown:键盘按下时触发 keypress:键盘按下并抬起的瞬间触发. keyup:键盘抬起触发[注意

js 中事件的个人理解

事件 事件组成 1,触发谁的事件 事件源2,触发是什么事件 click mouseover mouseout3,事件触发之后,干什么 事件函数 (干什么写在事件函数中) 事件对象 类似于飞机的“黑匣子” 用于保存 一个事件发生的时候,所有的信息比如:事件发生时鼠标的坐标如何获取事件对象: 兼容性问题:在不同浏览器上 获取方法不一样 在IE 以及DOM标准:全局的对象(window下) 名字event 在高版本IE 以及 chrome 不支持event来获取事件对象的,另外一种方式 自动变成事件函

JavaScript中事件绑定的方法总结

最近收集了一些关于JavaScript绑定事件的方法,汇总了一下,不全面,但是,希望便于以后自己查看. JavaScript中绑定事件的方法主要有三种: 1 在DOM元素中直接绑定 2 JavaScript代码中直接绑定 3 绑定事件监听函数 一.在DOM元素中直接绑定 也就是直接在html标签中通过 onXXX=“” 来绑定.举个例子: <input type="button" value="点我呦" onclick="alert("he