JavaScript基础 事件

Posted 2021-01-23 别念茶茶

事件流

事件流意味着页面上不止一个元素可响应相同的事件
如：当我们点击页面上的按钮时，实际上我们是点击了按钮，以及按钮的容器——整个页面。

事件冒泡
window ← document ← html ← body ← div
由点击的位置扩散到整个界面

事件捕获
由整个界面缩小到点击的位置
window → document → html → body → div

DOM事件流
包含事件冒泡和事件捕捉

传统事件处理程序指派方法

一、取得id = div1的元素节点。
var div1 = document.getElementById("div1");
//设置元素节点的onclick属性
div1.onclick = function(){alert("div1 被点了");}
或
function divClick(){alert(‘点中’);}
div1.onclick=divClick;

注意： 1、绑定事件处理程序时，后面不能加括号
2.必须确保在元素之后设置事件处理程序。
3.可在window.onload中指定处理程序。
window.onload = function(){}页面加载完成后自动调用
二、在事件属性中指定
<div id="div1" onclick="alert("div1 被点了.");" ></div>

现代事件处理程序指派方法

DOM
var div1 = document.getElementById("div1");
//添加事件处理程序,true:捕获阶段; false:冒泡阶段
div1.addEventListener("click",click1,false);
//删除事件处理程序
div1.removeEventListener("click",click1,false);
function click1(){
    alert("div1 is click...");
}
提示：删除事件处理程序时，阶段要相同。 传统事件处理程序是在冒泡阶段添加的。

事件处理程序的返回值
利用事件处理程序的返回值，可以影响事件的默认行为
超链接例子:
<a href="a.html" onclick="return confirm(‘要跳转吗？‘)">a.html</a>
注意：是根据返回结果是true或false来确定是否执行默认行为。

得到event对象
DOM
div1.onclick = function(){
    var e = arguments[0];//event对象
}
或者：
在元素标签内设置事件的时候，作为函数的参数直接传过去，this当前节点，event就是event对象
<div onclick="text(this,event)"></div>
函数：
function text（obj,e）｛
    
｝

event的属性和方法
获取事件类型：e.type
获取键盘码：keydown/keyup
检测是否按下e.shiftKey,e.altKey,e.ctrlKey
获取客户坐标:e.clientX,e.clientY  //基于body的坐标
获取屏幕坐标：e.screenX,e.screenY
获取基于当前元素的坐标：e.offerX,e.offerY

获取事件源    e.srcElement
获取字符的编码    e.keyCode
获取字符    e.key
阻止默认行为    e.returnValue=false    //可以用于限制键盘的输入类型
中止冒泡传播    e.cancelBubble=true

阻止默认事件：
<a href="http://www.baidu.com" onclick="stop(event)">百度</a>
<script>
    function stop(event) {
        if (event.preventDefault()) {

            event.preventDefault();  
        } else {

            event.returnValue = false;

        }

    }
</script>

阻止跳转：
<a href="javascript:void(0)">不跳转</a>

鼠标事件
常见事件
click：单击
dblclick：双击
mousedown：鼠标按下
mouseup：鼠标抬起
mouseout、mouseleave：鼠标离开
mousemove：鼠标移动
mouseenter、mouseover：鼠标进入
事件发生顺序
单击：mousedown,mouseup,click
双击：mousedown,mouseup,click,mousedown,mouseup,click,doubleclick

键盘事件
常见事件
keydown   按下
keypress  可以阻止键盘输入0
keyup      松开
事件发生顺序
字符键：keydown,keypress,keyup
非字符键：keydown,keyup

HTML事件
常见事件
load：文档加载完成
select：被选中的时候
change：内容被改变
focus：获取焦点
resize：窗口尺寸变化
scroll：滚动条移动
blur: 失去焦点
submit: 用于阻止表单提交

<input type="text" id="name" onselect="mySelect(this.id)">

<input type="text" id="name2" onchange="myChange(this.id)">

<input type="text" id="name3" onfocus="myFocus()">

<script>
    window.onload = function () {

        console.log("文档加载完毕！");

    };

    /*window.onunload = function () {

     alert("文档被关闭！");

     };*/

    /*打印选中的文本*/

    function mySelect(id) {

        var text = document.getElementById(id).value;

        console.log(text);

    }

    /*内容被改变时*/

    function myChange(id) {
 
       var text = document.getElementById(id).value;

        console.log(text);

    }

    /*得到光标*/

    function myFocus() {

        console.log("得到光标！");

    }

    /*窗口尺寸变化*/

    window.onresize = function () {

        console.log("窗口变化！")

    };

    /*滚动条移动*/

    window.onscroll = function () {

        console.log("滚动");

    }

</script>