三、事件
1、事件绑定方式
（1）在标签中添加绑定事件
<button onclick="window.clickFun()">点击1</button>
（2）获取标签节点，给标签对象设置onclick方法
var $btn = document.querySelector('#btn');
$btn.onclick = function() {
console.log(this); // button标签
console.log('点击2');
}
2、常用事件类型
（1）点击事件：onclick
（2）输入框事件
- （2.1）获得焦点：onfocus
// 获得焦点事件
$inp.onfocus = function() {
console.log('输入框获得了焦点');
}
- （2.2）失去焦点：onblur
// 失去焦点事件
$inp.onblur = function() {
console.log('输入框失去了焦点');
}
- （2.3）输入事件：oninput
//输入事件
$inp.oninput = function () {`
console.log(this.value);
}
（3）键盘事件
- （3.1）在用户按下按键时触发：onkeydown
$inp2.onkeydown = function(event) {
console.log(event);
if (event.keyCode === 13) {
alert('正在登录......')
}
}
- （3.2）当用户释放按键时触发：onkeyup
（4）鼠标事件
- （4.1）鼠标移入事件：onmouseover
- （4.2）鼠标移出事件：onmouseout
3、事件对象
（1）event：是事件的对象
// event是事件的对象
//双击事件的对象
$btn.ondblclick = function (event) {
console.log(event);
}
（2）keyCode：按键的编号（event对象的一个属性）
- 回车keyCode为13
$inp2.onkeyup = function (event) {
console.log(event);
if (event.keyCode === 13) {
alert('正在登录......')
}
}
（3）event.currentTarget：表示绑定的元素
（4）event.target：表示点击的元素
var $out = document.querySelector('#out');
$out.onclick = function(event) {
console.log('绑定的元素',event.currentTarget);
console.log('点击的元素',event.target);
}
4、addEventListener：事件监听（事件绑定）
（1）一个普通的函数，当它跟事件绑定在一起的时候，它有另外一个名字: 监听器
/**
* clickFun是个普通的函数
* 当它跟事件绑定在一起的时候,它有另外一个名字: 监听器
*/
function clickFun() {
console.log('哈哈');
}
-
与addEventListener区别
- clickFun函数绑定多次却只能执行一次
- addEventListener绑定多少次就能执行多少次
（2）JS事件的三个阶段
Dom树基本结构图
- （2.1）捕获：事件由页面元素接受，逐级向下（通过Dom树），到具体的元素
- （2.2）目标：具体元素
- （2.3）冒泡：与捕获相反，事件由具体元素接受，逐级向上（通过Dom树），到页面元素
（3）
- （3.1）事件捕获：当使用事件捕获时，父元素先触发，子元素后触发
- （3.2）事件冒泡：当使用事件冒泡时，子元素先触发，父元素后触发
（4）addEventListener的使用（绑定事件）
- （4.1）第一个参数：事件的类型
- （4.2）第二个参数：绑定的函数
-
（4.3）第三个参数：监听阶段
- false：冒泡阶段（常用）
- true：捕获阶段
$btn.addEventListener('click',function(event) {
alert('嘿嘿');
},false);
（5）阻止事件冒泡：event.stopPropagation();
- 设置后点击子元素，父元素不会再被触发
var $gradeFather = document.querySelector('#gradeFather');
$gradeFather.addEventListener('click',function(event) {
alert('我是爷爷');
},false)
var $sun = document.querySelector('#sun');
$sun.addEventListener('click',function(event) {
// 阻止事件冒泡
event.stopPropagation();
alert('我是儿子');
},false)
（6）阻止默认事件：event.preventDefault();
- 例如阻止a标签跳转
var $a = document.querySelector('a');
$a.addEventListener('click', function() {
// 阻止默认事件
event.preventDefault();
alert('哈哈哈');
},false)
四、Bom对象和Dom对象
-
Bom对象：指浏览器对象模型，可以对浏览器窗口进行访问、操作。
-
Dom对象：指文档对象模型，可以访问HTML文档所有元素。
1、navigator.userAgent：判断用户设备（浏览器检测）
2、通过Dom对象对页面的标签进行增、删、改、查操作
（1）查（常用方法）
- （1.1）document.querySelector(' ');
- （1.2）document.querySelectorAll(' ');
- （1.3）document.getElementById(' ');
（2）添加
var num = 6;
function addEle() {
//1、创建节点
var $li = document.createElement('li');
//2、填充内容
$li.innerText = `第${num++}个li`;
//3、获取父元素节点
var $list = document.querySelector('#list');
//4、添加节点
$list.appendChild($li);
（3）删
document.querySelector('p').remove(); //把p标签删除
//删除多个p
function del() {
var p = document.querySelectorAll('p');
for (var i = 0; i < p.length; i++) {
document.querySelector('p').remove();
}
}
（4）修改
-
（4.1）通过样式进行修改
- var style = window.getComputedStyle($content)：只能通过它来获取内部或外联样式
- $content.style.display：只能获取内联样式
function hid() {
var $btn = document.querySelector('#btn'); //获取按钮节点
var list = document.querySelector('#list');
var style = window.getComputedStyle(list); // 获取内部或外联样式属性对象
if (style.display == 'block') {
list.style.display = 'none'; //通过内联样式进行修改
$btn.innerHTML = '显示';
} else {
list.style.display = 'block';
$btn.innerHTML = '隐藏';
}
}
- （4.2）通过类名进行修改
function toggle() {
var $btn = document.querySelector('#btn');
//1、获取节点元素
var $content = document.querySelector('#content');
// 2、获取content的class值
var className = $content.className;
console.log(className);
//3、判断className是否为空
if (!className) {
$content.className = 'dsn';
} else {
$content.className = '';
}
}
网友评论