js事件绑定细节说明

javascript绑定事件:

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

从最初开始,谁刚接触javascript的时候,老师都会这样教导我们怎么触发事件,在页面某个DOM节点上面添加所要触发的事件,比如:onclick,onmousedown,onmouseup,onfocus,onchange等等...看代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript">
         function init(val){
             alert(val + ‘事件触发‘);
         }
    </script>
</head>
<body>
 <h1 id="klm" onmousedown="init(‘onmousedown‘)">事件</h1>
</body>
</html>

直接在DOM节点内添加事件,这种方式初学者适用,对于我们企业前端开发最好不要用这样的方式,虽然这样看上去很直观,但把函数暴露在页面是很危险的事情。

那我们接下来将这个方式移到js中去操作,拿onclick来说,

时间: 2024-10-14 14:20:46

js事件绑定细节说明的相关文章

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事件绑定

js 中事件绑定不同的浏览器使用不同的方法,如何做到兼容所有的浏览器呢? 火狐浏览器支持document.addEventListener ,但是不支持document.attachEvent. chrome支持document.addEventListener,不支持document.attachEvent IE支持document.addEventListener,不支持document.attachEvent 为了兼容多浏览器,我们进行了封装: var addEvent = (functi

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事件绑定--支持匿名函数解除绑定

废话不多说,直接上代码 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元素上绑定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中事件绑定方法大致有三种: 1.在DOM元素中绑定 <input onclick="alert('在DOM中绑定')" type="button" value="点击我" /> 也可以在onclick中填写函数,与addeventlistener不同的是,在onclick中的函数允许小括号,而后者不允许. 2.在JavaScript代码中绑定 <input id="demo" type="but

原生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只能捕获数字,字母,符号键,而不能捕

JS事件绑定的三种方式比较

js事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ width:100%; height:100%; } input{ display: block; margin-bottom:10px; } .active{ color: