JavaScript事件：

汤姆与杰瑞
209 阅读5分钟
1、js介绍：JavaScript是由3个不同的部分组成：ECMAScript、BOM和DOM
           ECMAScript标准(ES5、ES6)

           浏览器对象模型（Browser Object Model，BOM）

           文档对象模型（Document Object Model，DOM）

            javascript 简称js
2、引入方式：

1、嵌入式（css内部式）

              

          <script>js代码
          </script>

2、外链式（css外部链接式）

                     <script src="js文件的路径">

                 </script>

3、行内式（css的内联样式）

3、输出方式：

1、弹框

alert("内容");

2、控制台输出语句

console.log("内容");

3、页面输出语句

document.write("内容");

-->

4、运算符：

微信图片_20210925162404.png

5、赋值运算符：

微信图片_20210925162527.png

6、对象： JavaScript 对象可以跨越多行，空格跟换行不是必须的

实例

var person = {
firstName:"John",
lastName:"Doe",
age:50,
eyeColor:"blue"
};

JavaScript事件类型：

  • UI事件：当用户与页面上的元素交互时触发
  • 焦点事件：当元素获得或失去焦点时触发
  • 鼠标事件：当用户通过鼠标在页面上执行操作时触发
  • 滚轮事件：当使用鼠标滚轮时触发
  • 文本事件：当在文档中输入文本时触发
  • 键盘事件：当用户通过键盘在页面上执行操作时触发
  • 合成事件：当为IME(输入法编辑器)输入字符时触发
  • 变动事件：当底层DOM结构发生变化时触发

第一部分鼠标事件：

click： 单击鼠标按钮时触发；

dblclick：当用户双击主鼠标按钮时触发；

mousedown： 当用户按下鼠标还未弹起时触发；

mouseup： 当用户释放鼠标按钮时触发；

mouseover： 当鼠标移到某个元素上方时触发；

mouseout： 当鼠标移出某个元素上方时触发；

mousemove：当鼠标指针在元素上移动时触发；

mouseenter： 在鼠标光标从元素外部首次移动至元素范围内触发，不参与冒泡；

mouseleave：鼠标移出；

第二部分UI事件：

UI事件中UI即（User Interface,用户界面），当用户与页面桑拿的元素交互时触发。

UI事件中主要包括load,unload,abort,error,select,resize,scroll事件。

1、load事件：
  • 当页面完全加载后（包括所有图像、js文件、css文件等外部资源）在window上面触发；
  • 当所有框架都加载完毕时在框架集上面触发；
  • 当图像加载完毕时在元素上面触发；
  • 当嵌入内容加载完毕时在元素上触发。 两种定义onload事件处理程序的方式：
    (1) js代码
    (2) 为元素添加一个onload属性 
    /*第一种方式*/
EventUtil.addHandler(window,"load",function(event){
  //进行相应的操作
})
/*第二种方式*/
<body onload="相应操作"></body>
    2、unload事件：

    与load事件对应，在文档被完全卸载后触发，只要用户从一个页面切换到另一个页面，就会发生unload事件。该事件用的最多的就是清除引用，以避免内存泄漏。

    /*第一种方式*/
EventUtil.addHandler(window,"unload",function(event){
  //进行相应的操作
})
/*第二种方式*/
<body onunload="相应操作"></body>
    3、error事件：

    事件的 事件处理程序 (en-US) ，在各种目标对象的不同类型错误被触发： 当 JavaScript运行时错误 （包括语法错误）发生时， window 会触发一个 Error Event 接口的 error 事件，并执行 window.onerror ()

    4、resize事件：

    当浏览器窗口被调整到一个新的高度或者宽度时，就会触发resize事件，该事件在window（窗口）上面触发，因此可以通过JavaScript或者元素中的onresize特性来指定事件处理程序，推荐的JavaScript方式如下：

    EventUtil.addHandler(window,"resize",function(event){});
//传入的event对象有一个target属性，值为document
    5、scroll事件：

    该事件是在window对象上发生的，但它实际表示的是页面中相应元素的变化：

    • 混杂模式下：通过元素的scrollLeft和scrollTop来监控到这一变化。
    • 标准模式下：通过元素来反映这一变化（除了Safari，Safari仍然基于跟踪滚动位置）
    EventUtil.addHandler(window, "scroll", function(event){
            if (document.compatMode == "CSS1Compat"){    //标准模式下
                alert(document.documentElement.scrollTop);
            } else {
                alert(document.body.scrollTop);
            }
        });

    第三部分焦点事件：

    焦点事件会在页面元素获得或失去焦点时触发，利用这些时间并与document.hasFocus()方法及document.activeElement属性配合，可以知晓用户在页面上的行踪。有6个焦点事件：

    1. blur：在元素失去焦点时触发，该事件不会冒泡，所有浏览器都支持。
    2. focus：在元素获得焦点时触发，该事件不会冒泡，所有浏览器都支持。
    3. focusin：与focus事件等价，但是它冒泡。
    4. focusout：是HTML事件blur的通用版本。

    第四部分键盘事件与文本事件：

    一：键盘事件

    keydown： 当用户按下键盘上任意键时触发，如果按住不放，会重复触发；

    keyup： 当用户释放键盘上的键触发；

    keypress： 当用户按下键盘上的字符键时触发，如果按住不放，会重复触发；

    js事件和jquery事件的区别：

    js和jquery的区别

    　　一、入口函数的不同

    　　1、js：window.onload = function(){内部放js}　　　

    　　实质就是一个事件，拥有事件的三要素，事件源，事件，事件处理程序。等到所有内容，以及我们的外部图片之类的文件加载完了之后，才会去执行。只能写一个入口函数；

    　　2、jQuery:(function())或者(function(){})或者(document).ready(function(){})是在 html所有标签都加载之后，就回去执行，可以写多个； 二、获取元素的方式不同

    　　1、js：常用的以下几个，除了id，其他的结果都是伪数组；

    　　2、jQuery：$(" ")通过和css雷同的选择器方式来获取元素。得到的是jquery对象（dom元素的数组，外加其他一些成员）。即使写的是id，唯一的，得到的对象都不是单一的；

    　　本质上jquery方式和qs方式都是获取DOM数组， 只不过jquery会多一些其他成员，DOM数组的每一个成员注册事件不能像jquery一样直接注册， 必须分别给每个元素注册； 三、事件处理程序不同

    　　1、js：document.getElementById(“id”).onclick = function(){　// 语句　}

    　　document.getElementById(“id”).addEventListener("click",function(){})

    　　onclick，onfoucs，onblur，fouce（自动获得），select（自动选择文本域内容），onmouseover，onmouseout，

    　　oninput/onpropertychange用户输入事件，onchange(下拉菜单select内容发生改变时发生事件，如果内容为几，那么做出什么反应)，

    　　2、jquery：$(“#id”).click(function(){ 　　　　// 语句 　　});

    事件对象（事件对象常用的属性和方法）

    1.e.target与this

    • e.target 返回的是触发事件的对象（元素）
    • this返回的是绑定事件的对象（元素）
    • e.target点击了哪个元素，就返回哪个元素；this哪个元素绑定了该事件就返回谁 　　 QQ图片20210926195114.png

    事件捕获

     当鼠标点击或者触发dom事件时（被触发dom事件的这个元素被叫作事件源），浏览器会从根节点 =>事件源（由外到内）进行事件传播。

    事件捕获的代码案例

        <div id="s2">s2</div>
</div>
<script>
    s1.addEventListener("click",function(e){
        console.log("s1 冒泡事件");
    },false);
    s2.addEventListener("click",function(e){
        console.log("s2 冒泡事件");
    },false);
</script>

    事件冒泡

    冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。

    事件冒泡的代码案例

        <div id="s2">s2</div>
</div>
<script>
    s1.addEventListener("click",function(e){
        console.log("s1 冒泡事件");
    },false);
    s2.addEventListener("click",function(e){
        console.log("s2 冒泡事件");
    },false);
</script>
avatar
文章
阅读
粉丝