（MC嘉）JavaScript事件总结

                                              JavaScript事件总结

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

开发工具与关键技术：Adobe Dreamweaver JavaScript

作者：曾维嘉

撰写时间：2020年4月28日

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

JavaScript事件      

- 事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间

       - JavaScript 与 HTML 之间的交互是通过事件实现的。

       - 对于 Web 应用来说，有下面这些代表性的事件：单击事件、鼠标移入移出事件、键盘按下/弹起事件等等

       事件就是用户与浏览器的交互行为

        简单的事件交互：

       onclick 鼠标点击某个对象 

       ondblclick 鼠标双击某个对象 

       onerror 当加载文档或图像时发生某个错误  

       onfocus 元素获得焦点 

       onblur 元素失去焦点

       onkeydown 某个键盘的键被按下 

       onkeypress 某个键盘的键被按下或按住 

       onkeyup 某个键盘的键被松开

       onload 某个页面或图像被完成加载 

       onmousedown 某个鼠标按键被按下 

       onmousemove 鼠标被移动 

       onmouseout 鼠标从某元素移开 

       onmouseover 鼠标被移到某元素之上 

       onmouseup 某个鼠标按键被松开 

       onreset 重置按钮被点击 

       onresize 窗口或框架被调整尺寸 

       onselect 文本被选定

       onsubmit 提交按钮被点击 

       onunload 用户退出页面

    给button按钮绑定事件

    var btn=document.getElementById("btn");

    btn.onclick=function(){

       alert("O(∩_∩)O哈哈~ 第二个按钮");

    }

JavaScript事件冒泡（Bubble）也是JavaScript事件中的一种

- 所谓冒泡指的就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发

- 在开发中大部分情况冒泡都是有用的，如果不希望冒泡发生可以通过事件对象取消冒泡 event.cancelBubble=true

    var box=document.getElementById("box");

    var innerBox=document.getElementById("innerBox");

    innerBox.onclick=function(event){

       事件对象

       event=event||window.event;

       取消冒泡

       event.cancelBubble=true;

       alert("innerBox的点击事件被触发了");

    };

box.onclick=function(event){

       //事件对象

       event=event||window.event;

       //取消冒泡

       event.cancelBubble=true;

       alert("box的点击事件被触发了");

    };

    document.body.onclick=function(){

       alert("body的点击事件被触发了");

    }​​​​​​