js --- DOM 续

摸鱼emoji
148 阅读4分钟

什么是事件

  • 一个事件的组成
    • 触发谁的事件：事件源
    • 触发什么事件：事件类型
    • 触发后做什么：事件处理函数
var oDiv = document.querySelector("div");
oDiv.onclick = function () {};
  • 上述代码
    • oDiv ==> 事件源
    • onclick ==> 事件类型就是 click
    • function () {} ==> 事件处理函数

事件的绑定方式

  • onxxxx:
    • 只能给一个元素注册一个事件，如果写了第二个，则会把第一个覆盖
oDiv.onclick = function () {
    console.log("第一个事件");
};
oDiv.onclick = function () {
    console.log("第二个事件");
};
  • addEventListener (非 IE 7 8 以下使用)
    • 语法：addEventListener('事件类型',事件处理函数,冒泡还是捕获)
oDiv.addEventListener(
    "click",
    function () {
        console.log("我是第一个事件");
    },
    false
);
oDiv.addEventListener(
    "click",
    function () {
        console.log("我是第二个事件");
    },
    false
);
  • 点击div时两个函数都会执行，并且按照书写的先后顺序
  • 注意： 事件类型不要写on,点击事件就是 click, 不是 onclick

attachEvent (IE 7 8 下 使用)

  • 语法: 元素.attachEvent('事件类型', 事件处理函数)
oDiv.attachEvent("click", function () {
    console.log("我是第一个事件");
});
oDiv.attachEvent("click", function () {
    console.log("我是第二个事件");
});
  • 点击 div 时, 两个函数都会执行, 并且会按照你注册的顺序倒叙执行
  • 先打印 我是第二个事件, 然后打印 我是第一个事件
  • 注意: 事件类型需要要写 on, 点击事件就是 onclick

两个方式的区别

  • 注册事件的时候事件类型参数的书写
    • addEventListener: 需要写 on
    • attachEvent: 不需要写 on
  • 参数个数
    • addEventListener: 一般是三个常用参数
    • attachEvent: 两个参数
  • 执行顺序
    • addEventListener: 顺序注册, 顺序执行
    • attachEvent: 顺序注册, 倒叙执行
  • 适用浏览器
    • addEventListener: 非 IE 7 8 的浏览器
    • attachEvent: IE 7 8 浏览器

常见的事件 (了解)

  • 事件分类
    • 浏览器事件
    • 鼠标事件
    • 键盘事件
    • 表单事件
    • 触摸事件
浏览器事件
  • load: 页面全部资源加载完毕
  • scroll: 浏览器滚动的时候触发
  • ...
鼠标事件
  • click: 点击事件
  • dblclick: 双击事件
  • contextmenu: 右键事件
  • mousedown: 鼠标左键按下事件
  • mouseup: 鼠标左键抬起事件
  • mousemove: 鼠标移动
  • mouseover: 鼠标移入事件
  • mouseout: 鼠标移出事件
  • mouseenter: 鼠标移入事件
  • mouseleave: 鼠标移出事件
        var box1 = document.querySelector('.box_1')
        var box2 = document.querySelector('.box_2')

        // box1.onmouseover = function () {
        //     console.log('移入');
        // }

        // box1.onmouseout = function () {
        //     console.log('移出');
        // }

        // 鼠标在事件源内部移入事件源子元素是不会触发事件
        box1.onmouseenter = function () {
            console.log('移入');
        }

        box1.onmouseleave = function () {
            console.log('移出');
        }
键盘事件
  • keyup: 键盘抬起事件
  • keydown: 键盘按下事件
  • keypress: 键盘按下在抬起事件
        var inp = document.querySelector('input')

        // inp.onkeydown = function () {
        //     console.log('按下');
        // }

        // inp.onkeyup = function () {
        //     console.log('抬起');
        // }

        inp.onkeypress = function () {
            console.log('按下再抬起');
        }
表单事件
  • onfocus: 输入框获取焦点
  • onblur: 输入框失去焦点
  • change: 表单内容改变事件
  • input: 表单内容输入事件
        var inp = document.querySelector('input')

        inp.oninput = function () {
            console.log("输入了");
        }

        inp.onchange = function () {
            console.log("改变了");
        }

        // inp.onfocus = function () {
        //     console.log("输入框获取焦点");
        // }

        // inp.onblur = function () {
        //     console.log("输入框失去焦点");
        // }
触摸事件
  • touchstart: 触摸开始事件
  • touchend: 触摸结束事件
  • touchmove: 触摸移动事件
        var oDiv = document.querySelector('div')

        oDiv.ontouchstart = function () {
            console.log('start');
        }

        oDiv.ontouchend = function () {
            console.log('end');
        }

        oDiv.ontouchmove = function () {
            console.log('move');
        }

事件对象

  • 什么时事件对象
    • 当触发了一个事件以后，对该事件的一些描述信息
    • 比如：点击的位置的坐标，触发键盘事件的按钮
  • 每一个事件都会有一个对象的对象来描述这些信息, 我们就把这个对象叫做 事件对象
  • 浏览器给了我们一个 黑盒子, 叫做 window.event, 就是对事件信息的所有描述
oDiv.onclick = function () {
    console.log(window.event.X轴坐标点信息);
    console.log(window.event.Y轴坐标点信息);
};

注意

  • 但这东西有兼容性问题, 在低版本IE里很好用, 但是在高版本IE和Chrome 里不好使了
  • 所以我们需要换一个方式来获取, 就是在每一个事件处理函数的形参位置, 默认第一个就是 事件对象
  • 推荐再每个事件里都使用兼容写法
oDiv.onclick = function (e) {
    console.log(e.X轴坐标点信息);
    console.log(e.Y轴坐标点信息);
};

点击事件的光标点获取

  • 我们点击事件的坐标点都不是一堆, 所以要有一个相对的坐标系
  • 例如:
    • 相对于事件源(就是我们点击的那个元素)
    • 相对于页面
    • 相对于浏览器窗口
  • 因为这些都不一样, 所以我们获取的方式也不一样

相对于事件源

  • offsetX 和 offsetY
  • 相对于点击的元素的左上角开始计算
* {
	margin: 0;
	padding: 0;
}
div {
	width: 300px;
	height: 300px;
	padding: 20px;
	border: 10px solid #333;
	margin: 20px 0 0 30px;
}

<div></div>
===========================================================================================
var oDiv = document.querySelector('div')

// 注册点击事件
oDiv.onclick = function (e) {
	console.log(e.offsetX)
	console.log(e.offsetY)
}

相对于浏览器窗口

  • clientX 和 clientY
  • 相对于浏览器窗口来计算的, 不管你页面滚动到什么情况, 都是根据窗口来计算坐标
* {
	margin: 0;
	padding: 0;
}
body {
	width: 2000px;
	height: 2000px;
}
div {
	width: 300px;
	height: 300px;
	padding: 20px;
	border: 10px solid #333;
	margin: 20px 0 0 30px;
}

<div></div>
===========================================================================================
var oDiv = document.querySelector('div')

// 注册点击事件
oDiv.onclick = function (e) {
	console.log(e.clientX)
	console.log(e.clientY)
}

相对于页面

  • pageX 和 pageY
  • 相对于整个页面的坐标点，不管有没有滚动都是相对页面拿到坐标点
* {
	margin: 0;
	padding: 0;
}
body {
	width: 2000px;
	height: 2000px;
}
div {
	width: 300px;
	height: 300px;
	padding: 20px;
	border: 10px solid #333;
	margin: 20px 0 0 30px;
}

<div></div>
===========================================================================================
var oDiv = document.querySelector('div')

// 注册点击事件
oDiv.onclick = function (e) {
	console.log(e.pageX)
	console.log(e.pageY)
}
avatar
文章
阅读
粉丝