js事件绑定函数

js中事件绑定方法大致有三种:

1.在DOM元素中绑定

<input  onclick="alert(‘在DOM中绑定‘)"  type="button"  value="点击我" />

也可以在onclick中填写函数,与addeventlistener不同的是,在onclick中的函数允许小括号,而后者不允许。

2.在JavaScript代码中绑定

<input  id="demo"  type="button"  value="点击我" />
<script type="text/javascript">
document.getElementById("demo").onclick=function(){
    alert(this.getAttribute("type"));
}
</script>

3.通过事件绑定函数来绑定

<input type="button" id="myBtn" value="点我"/>
<p id="demo"></p>
<script>
document.getElementById("myBtn").addEventListener("click", myFunction);
function myFunction()
{
    document.getElementById("demo").innerHTML = "Hello World";
}
</script>

其实1,2是同一种绑定方法,并且1,2同时存在时2会覆盖1,因为onclick是一种属性。

而第三种事件监听可以给同一个对象绑定多个函数,不会覆盖,而是依次执行。

时间: 2024-11-09 00:42:48

js事件绑定函数的相关文章

兼容IE9以下和非IE浏览器的原生js事件绑定函数

事件绑定函数的demo如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta charset="UTF-8"/> <title>测试事件绑定函数</title> <scrip

JS事件绑定和JQ的事件绑定的几种方式

JS事件绑定的方式: 1.内嵌法: <input type="button" onclick="test()" value="click me"/> 或者是多事件绑定:<input type="button" onclick="javascript:test();test1();" value="click me"/> 2.动态绑定 直接为对象赋值 documen

js事件绑定细节说明

javascript绑定事件: 经常用jquery去写的化,时间长了对原生态的js事件绑定的知识会慢慢淡化或者遗忘了,必须翻出来再次总结,以前中学老师就对我说过,你要想记住东西并深刻印象,需要3次左右的记忆,第一次看到的知识点,需要隔一小段时间再次去记忆,这是第二次的记忆比第一次印象深刻很多,然后再过长点时间再去记忆一次,第三次的记忆印象基本上能让你的记忆保持很多年,这么多年我也是这样实践去记忆.今天再次把js原生态事件的处理做个总结. 从最初开始,谁刚接触javascript的时候,老师都会这

Javascript:兼容ie的事件绑定函数

<script type="text/javascript"> function addEvent(obj,ev,fn){ if(window.addEventListener){ obj.addEventListener(ev,fn,false); }else{ obj.attachEvent("on"+ev,fn); } } addEvent(document,"click",function(){ alert('a'); });

js事件绑定--支持匿名函数解除绑定

废话不多说,直接上代码 var handlers = {}, bind = (function (){ if(window.addEventListener){ return function (el, type, callback, capture){ el.addEventListener(type, function (){ callback(); handlers[type] = handlers[type] || []; handlers[type].push(arguments.ca

js 事件绑定

事件绑定的方式 1.  DOM  元素行内绑定 <div onclick="alert(1)"></div> 2. js on+eventType document.onclick =function(){alert(2)} 3. addEventListener document.getElementById("myBtn").addEventListener("click", myFunction); function

js事件绑定及深入

学习要点: 1.传统事件绑定的问题2.W3C事件处理函数3.IE事件处理函数4.事件对象的其他补充 事件绑定分为两种:一种是传统事件绑定(内联模型,脚本模型),一种是现代事件绑定(DOM2级模型).现代事件绑定在传统绑定上提供了更强大更方便的功能. 一 传统事件绑定的问题 传统事件绑定中的内联模型不做讨论,基本很少去用.先来看一下脚本模型,脚本模型将一个函数赋值给一个事件处理函数.传统绑定如: window.onload=function(){ var box=document.getEleme

js事件绑定/监听

事件绑定/监听的方法 1.直接绑定 顾名思义,直接在DOM元素上绑定onclick.onmouseover.onmouseout.onmousedown.onmouseup.ondblclick.onkeydown.onkeypress.onkeyup等事件 var ul = document.getElementById('ul') console.log(ul) ul.onclick = function() { console.log('click 事件绑定成功') } 这种方法最简单,也

原生js事件绑定

一.JS事件 (一)JS事件分类 1.鼠标事件: click/dbclick/mouseover/mouseout 2.HTML事件: onload/onunload/onsubmit/onresize/onchange/onfoucs/onscroll 3.键盘事件: keydown:键盘按下时触发 keypress:键盘按下并抬起的瞬间触发. keyup:键盘抬起触发 [注意事项] ①执行顺序:keydown keypress keyup②keypress只能捕获数字,字母,符号键,而不能捕