JavaScript学习笔记进阶篇-事件（三）

9.事件

事件：用户操作页面元素时，可以被JS侦测到的行为，如单击、双击等

9.1 JS中的事件绑定

事件绑定：JS侦测到用户触发的事件后，执行一段代码，即给某一个标签的特定事件绑定一个函数

9.1.1.标签的事件属性

• 所有标签都有的事件属性

单击事件：onclick
双击事件：ondblclick
鼠标移入事件：onmouseover
鼠标移出事件：onmouseout
鼠标按下事件：onmousedown
鼠标弹起事件：onmouseup
鼠标移动事件：onmousemove

• body标签

页面加载完毕事件：onload
//通常在该事件中定义只需要执行1次的代码

• form标签相关事件
  • input标签事件

  获取焦点事件：onfocus
  失去焦点事件：onblur
  值改变事件：onchange

  • form表单事件

  表单提交事件：onsubmit

• 给标签绑定事件
  
  • 示例

<h1 onclick="handleClick()">h1_1</h1>
    <h1 ondblclick="handleDblClick()">h1_2</h1>
    <h1 onmouseover="handleMouseOver()">h1_3</h1>
    <h1 onmouseout="handleMouseOut()">h1_4</h1>
    <h1 onmousedown="handleKeyDown()">h1_5</h1>
    <h1 onmouseup="handleMouseUp()">h1_6</h1>
    <h1 onmousemove="handleMouseMove()">h1_7</h1>
   

    <script type="text/javascript">
        function handleClick(){
     
            console.log("单击");
        }
        function handleDblClick(){
     
            console.log("双击");
        }
        function handleMouseOver(){
     
            console.log("鼠标移入");
        }
        function handleMouseOut(){
     
            console.log("鼠标移出");
        }
        function handleMouseDown(){
     
            console.log("鼠标按下");
        }
        function handleMouseUp(){
     
            console.log("鼠标弹起");
        }
        function handleMouseMove(){
     
            console.log("鼠标移动");
        }
       
    </script>

<form action="" onsubmit="handleSubmit()">
        数据: <input type="text" onfocus="handleFocus()" onblur="handleBlur()" onchange="handleChange()"> <br>
        <input type="submit" value="提交"/>
    </form>
    <script type="text/javascript">
        function handleFocus(){
     
            console.log("获取焦点");
        }
        function handleBlur(){
     
            console.log("失去焦点");
        }
        function handleChange(){
     
            console.log("值发生改变");
        }

        function handleSubmit(){
     
           // console.log("submit");
           alert("submit");
        }
    </script>

9.2 事件对象

事件对象：在用户触发标签的一个事件时，同时会产生包含事件详细信息的对象。通过事件对象可以获取发生事件的标签、事件的类型、事件的位置等等信息.

<!--
        1. 事件属性中，调用函数必须传入名为event的实参
    -->
    <input type="button" value="单击" onclick="handleClick(event)">
    <script type="text/javascript">
    /*
        2. 函数要定义形参接收事件对象
    */
        function handleClick(e){
     
            console.log("click");
            //e接收事件对象event
            console.log(e.target);//发生事件的标签
            console.log(e.type);//事件的类型
            //获取事件发生的位置 clientX 在x轴（水平方向）距左上角的距离
            //                 clientY 在y轴（竖直方向）距左上角的距离
            console.log(e.clientX);
            console.log(e.clientY);
        }
    </script>

9.3 事件函数中的this

直接在函数中使用this，this并不是触发事件的标签。

 <input type="button" value="单击" onclick="handleClick()">
    <script type="text/javascript">
        function handleClick(){
     
            console.log("click");
            console.log(this);//window对象，不是input
        }
  </script>

如何在函数中获取触发事件的标签对象?

• 1.使用事件对象

<input type="button" value="单击" onclick="handleClick(event)">
    <script type="text/javascript">
        function handleClick(e){
     
            console.log("click");
            console.log(this);
            console.log(e.target);
        }
</script>

• 2.使用this

<input type="button" value="单击" onclick="handleClick(this)">
    <script type="text/javascript">
        function handleClick(t){
     
            console.log("click");
            console.log(this);
            console.log(t);
        }
    </script>

9.4 事件冒泡

父标签包含子标签，子标签所在的区域是父标签的一部分。触发子标签的事件也会级联触发父标签的事件。

事件冒泡是现行的标准。

单击li会触发ul的单击事件。

<ul onclick="handleUlClick()">
        <li onclick="handleLiClick()">桃子</li>
        <li onclick="handleLiClick()">李子</li>
        <li onclick="handleLiClick()">梨子</li>
    </ul>
    <script type="text/javascript">
        function handleLiClick(e){
     
            console.log("li click");
            
        }

        function handleUlClick(e){
     
            console.log("ul click");
            
        }
    </script>

事件冒泡的价值:可以在父标签统一处理子标签的事件

<ul onclick="handleUlClick(event)">
        <li >桃子</li>
        <li >李子</li>
        <li >梨子</li>
    </ul>
    <script type="text/javascript">
        function handleLiClick(){
     
            console.log("li click");
            
        }

        function handleUlClick(e){
     
            console.log("ul click");
            console.log(e.target.tagName);
            if(e.target.tagName =="LI"){
     
                console.log("li click");
            }
        }
    </script>