zoukankan      html  css  js  c++  java
  • javaScript事件绑定

    事件绑定,就是要对某一个东西进行操作。(因为你想让他实现什么效果,所以就得绑定他,哈哈哈!)

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

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

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

    1、用例子的形式来给大家解释一下,如何在DOM元素中直接绑定。

    单击一个按钮,弹出警告框的代码

    <input onclick="myAlert()" type="button" value="点击我,弹出警告框" />
    <script type="text/javascript">
    function  alert(){
    alert("hello,我是警告框");
    }
    </script>

    是不是很简单,然后继续吧...

    2、在JavaScript代码中绑定(绑定事件可以使JavaScript代码与HTML标签分离,文档结构清晰,便于管理和开发)

    <input id="demo" type="button" value="点击我,显示 type 属性" />
    <script type="text/javascript">
    document.getElementById("demo").onclick=function(){
    alert(this.getAttribute("type")); // this 指当前发生事件的HTML元素
    }
    </script>

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

    ①.addEventListener(eventName,handle,useCapture)。

    标准的绑定事件监听函数的方法

    eventName 事件名称。注意,这里的事件名称没有“ on ”,如鼠标单击事件 click ,鼠标双击事件 doubleclick ,鼠标移入事件 mouseover,鼠标移出事件 mouseout 等。
    handle 事件句柄函数,即用来处理事件的函数。
    useCapture

    Boolean类型,是否使用捕获,一般用false 。

    ②.attachEvent(eventName,handle);

    elementObject DOM对象(即DOM元素)。
    eventName 事件名称。注意,与addEventListener()不同,这里的事件名称有“ on ”,如鼠标单击事件 onclick ,鼠标双击事件 ondoubleclick ,鼠标移入事件 onmouseover,鼠标移出事件 onmouseout 等。
    handle 事件句柄函数,即用来处理事件的函数。  
  • 相关阅读:
    dwz tabs table实现翻页及各tabs查询
    DruidDataSource配置
    利用blob对象实现大文件分片上传
    HTML5 File API 全介绍
    JS获取当前网页内容,创建文件并下载,URL.createObjectURL和URL.revokeObjectURL
    使用 CSS 接收用户的点击事情并对相关节点进行操作
    Flex布局
    background: inherit制作倒影、单行居中两行居左超过两行省略
    层叠顺序与堆栈上下文、font-family字体定义顺序的
    简单使用GA监控网站浏览行为
  • 原文地址:https://www.cnblogs.com/weiyz/p/7050335.html
Copyright © 2011-2022 走看看