精华内容
下载资源
问答
  • 主要介绍了JS 事件绑定事件监听、事件委托详细介绍的相关资料,需要的朋友可以参考下
  • javascript给DOM绑定事件处理函数总的来说有2种方式:在html文档中绑定、在js代码中绑定。下面的方式1、方式2属于在html中绑定事件,方式3、方式4和方式5属于在js代码中绑定事件,其中方法5是最推荐的做法。 方式1:...
  • js事件绑定

    2018-06-06 10:50:07
    事件和标签,完全分开, 事件分为三个主要部分,1.事件源,2.事件,3.响应行为,这三者之间的关系是如何的?这里为你解答
  • 大家都知道要想让 JavaScript 对用户的操作作出响应,首先要对 DOM 元素绑定事件处理函数。所谓事件处理函数,就是处理用户操作的函数,不同的操作对应不同的名称。下面这篇文章给大家详细介绍了JavaScript绑定...
  • 主要介绍了JS事件绑定事件流模型的相关知识,非常不错,具有参考借鉴价值,感兴趣的朋友跟随脚本之家小编一起看看吧
  • 主要介绍了javascript事件绑定学习要点,主要包含下面四个方面1.传统事件绑定的问题,2.W3C事件处理函数,3.IE事件处理函数,4.事件对象的其他补充,有需要的小伙伴可以参考下
  • js为快捷键绑定事件,当按这个快捷键时就会触发事先绑定处理函数,下面以ctrl+k为例与大家分享下具体的实现代码
  • JavaScript绑定事件的方法 要想让 JavaScript 对用户的操作作出响应,首先要对 DOM 元素绑定"事件处理函数"。所谓事件处理函数,就是处理用户操作的函数,不同的操作对应不同的名称。 在JavaScript中,有三种常用的...
    JavaScript绑定事件的方法

    要想让 JavaScript 对用户的操作作出响应,首先要对 DOM 元素绑定"事件处理函数"。所谓事件处理函数,就是处理用户操作的函数,不同的操作对应不同的名称。

    在JavaScript中,有三种常用的绑定事件的方法:

    • 在DOM元素中直接绑定;
    • 在JavaScript代码中绑定;
    • 绑定事件监听函数。
    1.在DOM元素中直接绑定

    html标签事件绑定:属性赋值 ,这个在该元素的properties属性中可以查到, 也可以在事件监听中看到

    function show(){
      console.log('show');
    }
    
    function print(){
      console.log('print');
    }
    
    <button onclick="show()" id="btn1" onclick="print()">html标签事件绑定</button>
    //触发的方法只有show方法
    
    <button onclick="show();print()" id="btn1">html标签事件绑定</button>
    //一个事件,触发两个方法
    
    2.在JavaScript代码中绑定

    js事件绑定:属性赋值,这个在该元素的properties属性中可以查到,也可以在事件监听中看到

    <button id="btn2">js事件绑定</button>
    
     document.getElementById("btn2").onclick = show;
     document.getElementById("btn2").onclick = print;
    
    //只能触发print方法,如果需要同时触发两个方法,只能使用事件监听,也就是第三种绑定方案.
    
    3.绑定事件监听函数

    只可以在该元素的事件监听中看到

    <button id="btn3">事件监听</button>      
    
    //show和print两个方法都可以触发
    document.getElementById("btn3").addEventListener("click",show);
    document.getElementById("btn3").addEventListener("click",print);
    
    //移除事件监听
    document.getElementById("btn3").removeEventListener("click");
    
    展开全文
  • 事件绑定:有三种常用的绑定事件的方法: 1、在DOM元素中直接绑定; 2、在 javascript 代码中绑定; 3、绑定事件监听函数。 1、在DOM中直接绑定事件 我们可以在DOM元素上直接绑定事件 例如: function ...
    事件绑定:有三种常用的绑定事件的方法:
    1、在DOM元素中直接绑定;
    2、在 javascript 代码中绑定;
    3、绑定事件监听函数。
    1、在DOM中直接绑定事件
    我们可以在DOM元素上直接绑定事件
    例如:
    <input type='button' value='click me' οnclick='hello()'>
    <script>
    function hello(){
    alert('hello world!');
    };
    </script>

    2、在 javascript 代码中绑定
    在javascript代码中(即script标签内)绑定事件可以使用javascript代码与HTML标签分离,文档清晰,便于管理和开发。
    例如:
    <input type='button' value='click me' id='btn'>
    <script>
    document.getElementById('btn').onclick = function(){
    alert('hello world!');
    };
    </script>

    3、使用时间监听绑定事件
    绑定事件的另一种方法是用addEventListener()或attachEvent()来绑定时间监听函数。
    事件监听
    关于时间监听,定义了3个事件阶段,依次是捕获阶段、目标阶段、冒泡阶段。
    语法:
    element.addEventListener(event,function,useCapture)
    event:(必需)事件名,支持所有DOM事件。
    function:(必需)指定要事件触发时执行的函数。
    useCapture:(可选)指定事件是否在捕获或冒泡阶段执行。true,捕获。false,冒泡。默认是false。
    注意:ie8一下不支持
    例如:
    <input type='button' value='click me' id='btn1' />
    <script>
    document.getElementById('btn1').addEventListener('click',hello);
    function hello(){
    alert('hello world!');
    };
    </script>
    IE标准:
    语法:
    element.attachEvent(event,function)
    event:(必需)事件类型。需加“on”,例如:onclick。
    function:(必需)指定要事件触发时执行的函数。
    例如:
    <input type='button' value='click me' id='btn2' />
    <script>
    document.getElementById('btn2').attachEvent('onclick',hello);
    function hello(){
    alert('hello world!');
    };
    </script>

    事件监听的优点

    1、可以绑定多个事件。
    例如:常规方式绑定
    <input type='button' value='click me' id='btn3' />
    <script>
    var btn3 = document.getElementById('btn3');
    btn3.onclick = function(){
    alert('hello 1');//不执行
    };
    btn3.onclick = function(){
    alert('hello 2');//执行
    };
    </script>
    注意:常规事件绑定只执行最后绑定的事件。

    用监听的方法来绑定
    <input type='button' value='click me' id='btn4' />
    <script>
    var btn4 = document.getElementById('btn4');
    btn4.addEventListener('click',hello1);
    btn4.addEventListener('click',hello2);
    function hello1(){
    alert('hello 1');
    };
    function hello2(){
    alert('hello 2');
    };
    </script>
    这样两个事件都执行了。

    2、可以解除相应的绑定
    例如:
    <input type='button' value='click me' id='btn5' />
    <script>
    var btn5 = document.getElementById('btn5');
    btn5.addEventListener('click',hello1); //执行了
    btn5.addEventListener('click',hello2); //不执行
    btn5.removeEventListener('click',hello2);
    function hello1(){
    alert('hello 1');
    };
    function hello2(){
    alert('hello 2');
    };
    </script>

    封装事件监听
    <input type='button' value='click me' id='btn5' />
    //绑定监听事件
    function addEventHandler(target,type,fn){
    if(target.addEventListener){
    target.addEventListener(type,fn);
    }else{
    target.addEventListener('on'+type,fn);
    };
    };
    //移除监听事件
    function removeEventHandler(target,type,fn){
    if(target.removeEventListener){
    target.removeEventListener(type,fn);
    }else{
    target.detachEvent('on'+type,fn);
    };
    };

    事件委托
    事件委托就是利用冒泡的原理,把时间加到父元素上,触发执行效果。
    <input type='button' value='click me' id='btn6' />
    <script>
    var btn6 = document.getElementById('btn6');
    document.onclick = function(event){
    event = event || window.event;
    var target = event.target || event.srcElement;
    if(target == btn6){
    alert(btn5.value);
    };
    };
    </script>

    事件委托的优点
    1、能够提高javascript性能,事件委托可以显著的提高事件的处理速度,减少内存的占用。
    例如:
    <ul id='list'>
    <li id='item1'>item1</li>
    <li id='item2'>item1</li>
    <li id='item3'>item1</li>
    </ul>
    <script>
    var item1 = document.getElementById('item1');
    var item1 = document.getElementById('item2');
    var item1 = document.getElementById('item3');
    document.addEventListener('click',function(event){
    var target = event.target;
    if(target == item1){
    alert('hello item1');
    }else if(target == item2){
    alert('hello item2');
    }else if(target == item3){
    alert('hello item3');
    };
    });
    </script>
    2、动态的添加DOM元素,不需要因为元素的改动而修改事件绑定。
    <ul id='list'>
    <li id='item1'>item1</li>
    <li id='item2'>item2</li>
    <li id='item3'>item3</li>
    </ul>
    <script>
    var list = document.getElementById('list');
    document.addEventListener('click',function(event){
    var target = event.target;//target 事件属性可返回事件的目标节点(触发该事件的节点),如生成事件的元素、文档或窗口
    if(target.nodeName == 'LI'){
    alert(target.innerHTML);
    };
    });
    var node = document.createElement('li');
    var textnode = document.createTextNode('item4');
    node.appendChild(textnode);
    list.appendChild(node);
    </script>
    注释:
    什么是nodeName?
    获得bod元素的节点名称:
    定义和用法:
    nodeName属性指定节点的节点名称。
    如果节点是元素节点,则nodeName属性返回标签名。
    入股节点是属性节点,则nodeName属性返回属性的名称。
    对于其他节点类型,nodeName属性返回不同节点类型的不同名称。

    什么是event对象?
    event对象代表事件的状态。
    事件通常与函数结合使用,函数不会在事件发生前被执行!
    其实 event对象就是事件的结合。

    什么是target?
    target事件属性可返回事件的目标节点(触发该事件的节点),如生成事件的元素、文档或窗口。
    语法:event.target返回事件的目标节点。

    什么是createTextNode?
    这个方法可以创建一个文本节点:

    什么是event.srcElement?
    设置或获取触发事件的对象,引用对象,这个对象有什么属性,就可以使用。
    常用的有:
    event.srcElement.TagName //事件对象的html标记
    event.srcElement.innerText //事件对象的内文
    event.srcElement.value //表单事件对象的值


    本人小白一枚,还在学习的路上,如有大神路过,请不吝赐教
    展开全文
  • 下面小编就为大家带来一篇浅谈JavaScript事件绑定的常用方法及其优缺点分析。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 今天小编就为大家分享一篇js事件on动态绑定数据,绑定多个事件的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • JS 事件绑定函数代码

    2020-10-29 04:31:02
    JS 事件绑定函数代码,解决了浏览器兼容,现在可以兼容IE6 7 8 FF 谷歌
  • 事件绑定分为两种: 一种是传统事件绑定(内联模型/脚本模型);上一章内容; 一种是现代事件绑定(DOM2级模型);现代事件绑定在传统事件绑定基础上提供了更强大的功能; 一 传统事件绑定的问题 // 脚本模型将一个函数赋值...
  • 主要为大家详细介绍了javascript事件绑定使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 本文实例讲述了JS事件绑定的常用方式。分享给大家供大家参考,具体如下: 常用的事件绑定的几种方式有三种: 直接在 dom 元素上进行绑定。 用 on 绑定。 用 addEventListener、attachEvent 绑定。 一、直接在 dom...
  • dom - js事件绑定快捷键

    千次阅读 2020-11-01 00:17:08
    var key = event.keyCode || event.which if (key == 13) { alert("你按的是回车键") } } // 组合写法 function test1(event) { // 当然还要组织浏览器的默认事件 event.preventDefault(); var key = event.keyCode...

    直接上代码

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>快捷键</title>
    </head>
    
    <body>
        <div id="div1">快捷键1</div>
        <script>
            // document.onkeydown  = test();  加了括号就相当于一初始化就执行了  错误
            // 快捷键.html:14 Uncaught TypeError: Cannot read property 'keyCode' of undefined
            document.onkeydown = test1;
            function test(event) {
                // 当然还要组织浏览器的默认事件
                event.preventDefault();
                var key = event.keyCode || event.which
                if (key == 13) {
                    alert("你按的是回车键")
                }
            }
    
            // 组合写法 
            function test1(event) {
                // 当然还要组织浏览器的默认事件
                event.preventDefault();
                var key = event.keyCode || event.which
                var ctrlKey = event.ctrlKey || event.metaKey;
                if (ctrlKey && key == 49) {
                    alert('你按了组合键: ctrl + 1' );
                }
            }
        </script>
    </body>
    </html>
    

    在这里插入图片描述

    展开全文
  • JavaScript中,有三种常用的绑定事件的方法: 1、在DOM元素中直接绑定。 2、在JavaScript代码中绑定。 3、绑定事件监听函数。 二、具体分析: 1、在DOM元素中直接绑定:onclick ①原生函数: <input οnclick=...

    一、有几种常用的:

    在JavaScript中,有三种常用的绑定事件的方法:

    1、在DOM元素中直接绑定。
    2、在JavaScript代码中绑定。
    3、绑定事件监听函数。

    二、具体分析:

    1、在DOM元素中直接绑定:onclick

    ①原生函数:

    <input οnclick="alert('谢谢支持')" type="button" value="点击我,弹出警告框" />
    

    ②自定义函数:

    <input οnclick="myAlert()" type="button" value="点击我,弹出警告框" />
    <script type="text/javascript">
    function myAlert(){
    alert("谢谢支持");
    }
    </script>
    
    2、在Javascript代码中绑定:有三种方法获取元素(获取节点、获取元素、获取标签)

    ①例如,为 id=“demo” 的按钮绑定一个事件,显示它的 type 属性:

    <input id="demo" type="button" value="点击我,显示 type 属性" />
    
    <script type="text/javascript">
    document.getElementById("demo").οnclick=function(){
    alert(this.getAttribute("type")); // this 指当前发生事件的HTML元素,这里是<div>标签
    }
    </script>
    
    好处:在JavaScript代码中(即<script>标签内)绑定事件可以使JavaScript代码与HTML标签分离,
    文档结构清晰,便于管理和开发。
    
    3、绑定事件监听函数:

    绑定事件的另一种方法是用 addEventListener() 或 attachEvent() 来绑定事件监听函数。

    function addEvent(obj,type,handle){
    			try{ 		// Chrome、FireFox、Opera、Safari、IE9.0及其以上版本
    				obj.addEventListener(type,handle,false);
    			  }catch(e){
    			   try{ 	// IE8.0及其以下版本
    			   obj.attachEvent('on' + type,handle);
    			}catch(e){  // 早期浏览器
    			   obj['on' + type] = handle;
    }
    }
    }
    

    这里使用 try{ … } catch(e){ … } 代替 if … else… 语句,避免浏览器出现错误提示。

    addEventListener() 语法知识的补充:

    ①addEventListener()函数语法:
    elementObject.addEventListener(eventName,handle,useCapture);

    参数说明
    elementObjectDOM对象(即DOM元素)
    eventName事件名称。注意,这里的事件名称没有“ on ”,如鼠标单击事件 click ,鼠标双击事件 doubleclick ,鼠标移入事件 mouseover,鼠标移出事件 mouseout 等
    handle事件句柄函数,即用来处理事件的函数
    useCaptureBoolean类型,是否使用捕获,一般用false 。这里涉及到JavaScript事件流的概念,后续章节将会详细讲解

    ②attachEvent()函数语法:
    elementObject.attachEvent(eventName,handle);

    参数说明
    elementObjectDOM对象(即DOM元素)
    eventName事件名称。注意,与addEventListener()不同,这里的事件名称有“ on ”,如鼠标单击事件 onclick ,鼠标双击事件 ondoubleclick ,鼠标移入事件 onmouseover,鼠标移出事件 onmouseout 等
    handle事件句柄函数,即用来处理事件的函数

    后言:要想让 JavaScript 对用户的操作作出响应,首先要对 DOM 元素绑定事件处理函数。
    所谓事件处理函数,就是处理用户操作的函数,不同的操作对应不同的名称。

    展开全文
  • js事件绑定的几种方式

    千次阅读 2019-04-10 09:28:22
    要想让 JavaScript 对用户的操作作出响应,首先要对 DOM 元素绑定事件处理函数。所谓事件处理函数,就是处理用户操作的函数,不同的操作对应不同的名称。在JavaScript中,有三种常用的绑定事件的方法: 在DOM元素中...
  • js事件绑定不上

    2019-11-21 21:55:00
    今天遇到了一个问题,按钮的事件绑定不上 经过各种输出 console.log(选择器...js发出ajax请求的时候,没有处理完,就加载了绑定函数,所以找不到相应的元素去绑定。 解决办法:异步请求做完以后,才执行绑定的代码 ...
  • JS事件绑定三种方式

    2020-08-19 10:58:06
    1. 在html标签中直接绑定; <input type="button" id="btn0" onclick="alert...重复绑定会覆盖之前绑定的onclick事件 let button1 = document.getElementById("btn1") button1.onclick = function() { consol
  • 下面小编就为大家带来一篇兼容浏览器的js事件绑定函数(详解)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • JavaScript事件绑定事件监听的区别

    千次阅读 2017-11-22 12:55:04
    <!doctype html> <title>Document <!--普通事件中的onclick事件只支持单个事件,会被其他onclick事件覆盖,(重点!!!) 有两种写法: 一是在标签内写oncl
  • 主要介绍了ES6中javascript实现函数绑定及类的事件绑定功能,结合实例形式分析了ES6中函数绑定及类的事件绑定原理、实现方法、相关操作技巧与注意事项,需要的朋友可以参考下
  • 原生js事件绑定事件委托

    千次阅读 2018-09-17 15:03:00
    最近常在移动端开发,由于不是大型站点,不需要使用vue等库,也不需要引用jquery和zepto等。...按照习惯来走,一般我们会喜欢在选择的元素上直接 on + 事件 ,加上相应的逻辑函数完成一个事件绑定...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 508,405
精华内容 203,362
关键字:

js事件绑定