• 所有问题

    • 用户与应用交互可以触发事件对吗

    用户与应用交互可以触发事件对吗

    举报该问题
    推荐答案   2016-06-25
    JavaScript和HTML的交互是通过事件实现的。JavaScript采用异步事件驱动编程模型，当文档、浏览器、元素或与之相关对象发生特定事情时，浏览器会产生事件。如果JavaScript关注特定类型事件，那么它可以注册当这类事件发生时要调用的句柄。
    事件流
    事件流描述的是从页面中接收事件的顺序，比如有两个嵌套的div，点击了内层的div，这时候是内层的div先出发click事件还是外层先触发？目前主要有三种模型
    IE的事件冒泡：事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的元素
    Netscape的事件捕获：不太具体的节点更早接收事件，而最具体的元素最后接收事件，和事件冒泡相反
    DOM事件流：DOM2级事件规定事件流包括三个阶段，事件捕获阶段，处于目标阶段，事件冒泡阶段，首先发生的是事件捕获，为截取事件提供机会，然后是实际目标接收事件，最后是冒泡句阶段。
    Opera、Firefox、Chrome、Safari都支持DOM事件流，IE不支持事件流，只支持事件冒泡
    如有以下html，点击div区域

    复制代码代码如下:

    <!DOCTYPE html >
    <html>
    <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>Test Page</title>
    </head>
    <body>
    <div>
    Click Here</div>
    </body>
    </html>

    事件处理程序（handler）
    我们也称之为事件侦听器（listener），事件就是用户或浏览器自身执行的某种动作。比如click、load、moseover等，都是事件类型（俗称事件名称），而响应某个事件的方法就叫做事件处理程序或者事件监听器或者事件句柄，事件处理程序名字是：on+事件类型。
    了解了这些，我们看看如何给元素添加事件处理程序
    HTML事件处理程序元素支持的每个事件都可以使用一个相应事件处理程序同名的HTML属性指定。这个属性的值应该是可以执行的JavaScript代码，我们可以为一个button添加 click事件处理程序

    复制代码代码如下:

    <input type="button" value="Click Here" onclick="alert('Clicked!');" />

    在HTML事件处理程序中可以包含要执行的具体动作，也可以调用在页面其它地方定义的脚本,刚才的例子可以写成这样

    复制代码代码如下:

    <input type="button" value="Click Here" onclick="showMessage();" />
    <script type="text/javascript">
    function showMessage() {
    alert('Clicked!');
    }

    在HTML中指定事件处理程序书写很方便，但是有两个缺点。

    首先，存在加载顺序问题，如果事件处理程序在html代码之后加载，用户可能在事件处理程序还未加载完成时就点击按钮之类的触发事件，存在时间差问题。
    其次，这样书写html代码和JavaScript代码紧密耦合，维护不方便。
    JavaScript指定事件处理程序通过JavaScript指定事件处理程序就是把一个方法赋值给一个元素的事件处理程序属性。每个元素都有自己的事件处理程序属性，这些属性名称通常为小写，如onclick等，将这些属性的值设置为一个方法，就可以指定事件处理程序，如下

    复制代码代码如下:

    <input id="btnClick" type="button" value="Click Here" />

    <script type="text/javascript">
    var btnClick = document.getElementById('btnClick');
    btnClick.onclick = function showMessage() {
    alert(this.id);
    };
    </script>

    这样处理，事件处理程序被认为是元素的方法，事件处理程序在元素的作用域下运行，this就是当前元素，所以点击button结果是：btnClick

    这样还有一个好处，我们可以删除事件处理程序，只需把元素的onclick属性赋为null即可
    DOM2事件处理程序DOM2级事件定义了两个方法用于处理指定和删除事件处理程序的操作：addEventListener和removeEventListener。所有的DOM节点都包含这两个方法，并且它们都接受三个参数：事件类型、事件处理方法、一个布尔值。最后布尔参数如果是true表示在捕获阶段调用事件处理程序，如果是false，则是在事件冒泡阶段处理。
    温馨提示：答案为网友推荐，仅供参考
    其他回答
    第1个回答  2016-06-25
    是的，具体可百度runloop相关资料
    相似回答
    什么是事件驱动编程?列出三个常用的windows事件答：鼠标事件：鼠标事件涉及与鼠标设备的交互。常见的鼠标事件包括点击、双击、拖拽、移动等。当用户在屏幕上移动鼠标或按下鼠标按钮时，系统会生成相应的鼠标事件。开发人员可以编写事件处理程序来响应这些鼠标事件，并执行相应的操作。键盘事件：键盘事件涉及与键盘设备的交互。常见的键盘事件包括按键按下、释放、...
    大家正在搜
    js实现用户交互的主要组件触发事件事件触发概念事件触发控制onchange事件触发不了宿舍事件怎么触发异化之地触发事件checkbox选中触发事件加载窗体时触发的事件是什么
    相关问题
    vb的事件驱动程序设计原理
    isv和钉钉之间有哪些数据交互
    Windows窗体应用程序：用户控件中button按钮Cli...
    静态事件触发和动态事件触发的区别
    谁能解释一下c#中的'事件'的用法
    html代码如何和java代码交互，我只懂html代码和ja...
    Axure中触发、事件、用例、动作是什么意思？
    对交互设计的看法，怎样把用户需求转化为实际产品