基本概念
- 事件是一些特定动作发生时所发出的信号,JavaScript中的事件是可以被 JavaScript 侦测到的行为。
- 网页中的每个元素都可以产生某些事件。比方说，我们可以在用户点击某按钮时产生一个 onClick 事件来触发某个函数。
事件处理(添加事件)
- (HTML事件处理)内联方式添加事件将事件看做标签的一个属性，与HTML混写，代码多时不容易管理
(DOM0级事件处理)脚本方式添加事件，实现了HTML和JS的分离
-
DOM2级事件处理
- ele.addEventListener()
- ele.removeEventListener()
- IE8及其以下需要使用IE事件处理程序attachEvent/detachEvent
var div1 = document.getElementById('div1'); var btn2 = document.getElementById('btn2'); var btn3 = document.getElementById('btn3'); function test1() { div1.innerHTML='点击事件'; } function test2() { div1.style.background = 'rgb(52, 205, 112)'; } // DOM 0级事件处理 btn2.onclick = test2;// 不用谢（） // DOM 2级事件处理 if (btn3.addEventListener) { btn3.addEventListener('click',test1); btn3.addEventListener('click',test2); btn3.removeEventListener('click',test2); }else if (btn3.attachEvent) { btn3.attachEvent('click',test1); btn3.attachEvent('click',test2); btn3.detachEvent('click',test2); }
常用的事件类型(事件处理函数)
鼠标事件
- onclick 鼠标点击某个对象
- ondblclick 当用户双击某个对象时调用的事件句柄。
ondblclick="test1()" - onmousedown 鼠标按钮被按下。
onmousedown="test1()" - onmousemove 鼠标被移动。
onmousemove="test1()" - onmouseout 鼠标从某元素移开。
onmouseout="test1()" - onmouseover 鼠标移到某元素之上。
addEventListener('mouseover',test1()) - onmouseup 鼠标按键被松开。
onmouseup="test1()" - ......
btn3.detachEvent('click',
// 匿名函数
function () {
xxx
}
);
键盘事件
- onkeydown 某个键盘按键被按下。
- onkeyup 某个键盘按键被松开。
- onkeypress 某个键盘按键被按下并松开。
- onkeydown与onkeypress的区别
- 一个放开一个没有放开，onkeydown 先于 onkeypress 发生。
- 我们没敲击一下键盘这三个事件会依次发生：onkeydown--onkeypress--onkeyup
- onkeypress 事件不是适用于系统按钮(如： ALT, CTRL, SHIFT, ESC)。
- onkeydown 是在用户按下任何键盘键时发生。 监听一个用户是否按下按键请使用 onkeydown 事件,所有浏览器都支持 onkeydown 事件。
- 键盘事件的event对象中包含一个keyCode属性，onkeydown和onkeyup表示你按下的具体的键，而onkeypress表示你按下的字符。
- ......
onkeydown="test1()"body中添加
其他事件
- onload 一个页面或一幅图像完成加载
- onunload 用户退出页面。
- IE6，IE7，IE8 中 刷新页面、关闭浏览器之后、页面跳转之后都会执行.
- IE9 刷新页面 会执行，页面跳转、关闭浏览器不能执行；
- Opera、Chrome 任何情况都不执行。
- onabort 图像的加载被中断
- onblur 元素失去焦点。
- onchange 域的内容被改变。
- onerror 在加载文档或图像时发生错误。
- onfocus 元素获得焦点。
- onselect 文本被选中。
- onreset 重置按钮被点击。
- onscroll 当文档被滚动时发生的事件。
- ......
或者放到body
// window.onload=function (){
// myFun4()
// }
事件的对象
在触发某个事件时，会产生一个事件对象event。这个对象中包含着所有与事件有关的信息。包括导致事件的元素，事件的类型以及其他与特定事件相关的信息。
- type:获取事件类型
- target:获取事件目标
- clientX 返回当事件被触发时，鼠标指针的水平坐标。
- clientY 返回当事件被触发时，鼠标指针的垂直坐标。
- screenX 返回当某个事件被触发时，鼠标指针的水平坐标。
- screenY 返回当某个事件被触发时，鼠标指针的垂直坐标。
- ctrlKey 返回当事件被触发时，"CTRL" 键是否被按下。
- altKey 返回当事件被触发时，"ALT" 是否被按下。
- shiftKey 返回当事件被触发时，"SHIFT" 键是否被按下。
- keyCode 事件属性 keyCode 属性在 Firefox 浏览器的 onkeypress 事件中是无效的。
- which 返回onkeypress事件触发的键的值的字符代码，或者 onkeydown 或 onkeyup 事件的键的代码。
注意：IE8 及其更早版本不支持 which 属性。不支持的浏览器可使用 keyCode 属性。但是， keyCode 属性在 Firefox 浏览器的 onkeypress 事件中是无效的。 var x = event.which || event.keyCode; // 使用 which 或 keyCode, 这样可支持不同浏览器- button 返回当事件被触发时，哪个鼠标按钮被点击。
- button 事件属性可返回一个整数，指示当事件被触发时哪个鼠标按键被点击。event.button=0|1|2
- 0 1 2分别代表左中右三个键，但是再IE里左中右三个键对应的数字为1 4 2
- ......
事件的冒泡和捕获
- 事件的冒泡：事件按照从最特定的事件目标到最不特定的事件目标的顺序触发。
- 事件冒泡可以形象地比喻为把一颗石头投入水中，泡泡会一直从水底冒出水面。也就是说，事件会从最内层的元素开始发生，一直向上传播，直到document对象。
- 事件的捕获：与事件冒泡相反，事件会从最外层开始发生，直到最具体的元素。
- 事件捕获时，父级元素先触发，子级元素后触发
- 可以自己选择绑定事件时采用事件捕获还是事件冒泡，方法就是绑定事件时通过addEventListener函数，它有三个参数，第三个参数若是true，则表示采用事件捕获，若是false，则表示采用事件冒泡。
- IE9以前的版本只支持事件冒泡，不支持事件捕获，它也不支持addEventListener函数，不会用第三个参数来表示是冒泡还是捕获，它提供了另一个函数attachEvent。
- 不是所有的事件都能冒泡，例如：blur、focus、load、unload
- stopPropagation():阻止事件冒泡
- preventDefault():阻止事件的默认行为
事件的绑定
- ele.addEventListener()
- ele.removeEventListener()
// 循环变化颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
#div1{
margin: 15px auto;
background: orange;
width: 200px;
height: 200px;
border-radius: 200px;
}
</style>
</head>
<body>
<div id="div1"></div>
<script type="text/javascript">
var div1 = document.getElementById('div1');
div1.onclick=test1;
function test1() {
div1.style.background = 'rgb(41, 48, 173)';
setTimeout('test2()',500);
}
function test2() {
div1.style.background = 'rgb(173, 65, 41)';
setTimeout('test3()',500);
}
function test3() {
div1.style.background = 'rgb(43, 173, 41)';
setTimeout('test1()',500);
}
</script>
</body>
</html>
- scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
- scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
- scrollHeight: 获取对象的滚动高度。
- scrollWidth:获取对象的滚动宽度
- document.documentElement.scrollTop||document.body.scrollTop 垂直方向滚动的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
div{
margin: 15px auto;
background: orange;
width: 200px;
height: 200px;
padding: 15px;
border-radius: 200px;
position: absolute;
}
</style>
</head>
<body>
<script type="text/javascript">
function test1(e) {
var num = 20;
var divs = document.getElementsByTagName('div');
var body = document.getElementsByTagName('body')[0];
for (var i = 0; i < num; i++) {
var rad = Math.floor(Math.random()*10)+'px';
divs[i] = document.createElement('div');
divs[i].style.background='rgb('+4*i+','+2*i+','+i+')';
divs[i].style.width=divs[i].style.height=rad
divs[0].style.left=e.clientX+'px';
divs[0].style.top=e.clientY+'px';
divs[i].style.left=e.clientX+Math.floor(Math.random()*10*i)+'px';
divs[i].style.top=e.clientY+Math.floor(Math.random()*10*i)+'px';
body.appendChild(divs[i])
}
}
document.onmousedown=test1;
</script>
</body>
</html>
// 随机键盘
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
input{
width: 30px;
height: 30px;
border-radius: 20px;
margin: 2px;
outline: none;
}
.div{
width: 120px;
height: 150px;
padding: 10px;
text-align: center;
background: rgba(180,90,30,0.3);
border:2px solid orange;
}
.inp{
width: 130px;
height: 20px;
}
.clear,.new{
width: 60px;
font-size: 12px;
}
</style>
</head>
<body>
<input type="text" class="inp" id="txt"><br>
<input type="button" class="clear" value="清楚" onclick="clearnum()">
<input type="button" class="new" value="重置键盘" onclick="cz()">
<div id="div1" class="div"></div>
<script type="text/javascript">
var txt = document.getElementById('txt');
var div1 = document.getElementById('div1');
// 生成随机数
function number() {
var num = [0,1,2,3,4,5,6,7,8,9];
var rand = [];
for (var i = 0; i < 10; i++) {
var n = Math.floor(Math.random()*(10-i));
rand.push(num[n]);
num.splice(n,1)// 删除num数组中下标为n的元素，保证不会出现重复数字
}
return rand;
}
document.write(number())
function createBtn() {
var ranArr = number();
var btnArr = [];
for (var i = 0; i < ranArr.length; i++) {
var btn = document.createElement('input');
btn.setAttribute('type','button');
btn.value = ranArr[i];
btn.onclick = btnClick;
btnArr.push(btn);
div1.appendChild(btn);
}
}
createBtn();
function btnClick() {
txt.value += this.value;// 这里this就是调用这个函数的对象
}
function clearnum() {
txt.value = '';
}
function cz() {
window.location.reload();
}
</script>
</body>
</html>
HTML5新增的JS选择器
在传统的 JavaScript 开发中，原生的 JavaScript 所提供的 DOM 选择方法并不多，仅仅局限于通过 tag, name, id 等方式来查找，这显然是远远不够的，如果想要进行更为精确的选择不得不使用看起来非常繁琐的正则表达式，或者使用某个库。
querySelector 和 querySelectorAll 方法是 W3C Selectors API 规范中定义的。他们的作用是根据 CSS 选择器规范，便捷定位文档中指定元素。 现在所有的浏览器厂商都提供了 querySelector 和 querySelectorAll 这两个方法的支持,使用它们，你可以像使用 CSS 选择器一样快速地查找到你需要的节点。
HTML5新增的JS选择器
querySelector 和 querySelectorAll 方法是 W3C Selectors API 规范中定义的。他们的作用是根据 CSS 选择器规范，便捷定位文档中指定元素。功能类似于jQuery的选择器。这使得在编写原生JavaScript代码时方便了许多。
- document.querySelector('selectors');
- 该方法返回满足条件的单个元素。按照深度优先和先序遍历的原则使用参数提供的CSS选择器在DOM进行查找，返回第一个满足条件的元素
-
document.querySelectorAll('selectors');
- 该方法返回所有满足条件的元素，结果是个nodeList集合。查找规则与前面所述一样。
-
注意事项
- 参数selectors 可以包含多个CSS选择器，用逗号隔开:element = document.querySelector('selector1,selector2,...');br>elementList = document.querySelectorAll('selector1,selector2,...');
- 这种方法查找元素是非实时的，即不支持有动态添加元素情况下的查找
-
document.getElementsByClassName("selector");返回文档中所有指定类名的元素集合，作为 NodeList 对象。
- IE8以下的浏览器中，无法通过Class标签getElementsByClassName函数获取元素。ie9以上及主流浏览器均支持通过Class获取元素，ie8及以下的解决办法：
- 可以用jQuery代替 引用jQuery后，使用$(".ClassName")等方法获取元素。
- 自己写getElementsByClassName函数方法
<script> //快捷的通过class ID 元素名称查找元素 function myFun1(){ // document.querySelector("li").style.backgroundColor = "red"; // document.querySelector("#u2").style.backgroundColor = "blue"; document.querySelector(".bb").style.backgroundColor = "blue"; } //结合CSS3的选择器进行更精确的查找 function myFun2(){ document.querySelector("#u2>li+li").style.backgroundColor = "red"; document.querySelector("#u1 li p").style.backgroundColor = "red"; } //只匹配第一个符合条件的元素 function myFun3(){ document.querySelector("h2, h3").style.backgroundColor = "red"; } //querySelectorAll返回的是一个集合 function myFun4() { var x=document.querySelectorAll("li"); x[3].style.backgroundColor = "green" //alert(x.length) for (var i = 0; i < x.length; i++) { x[i].style.backgroundColor = "red"; } } function myFun5(){ var x=document.querySelectorAll("#u1 .bb") for (var i = 0; i < x.length; i++) { x[i].style.backgroundColor = "green"; } } //querySelectorAll查找元素不是实时的 function myFun6(){ var u1=document.getElementById('u1') // var arr=document.querySelectorAll("#u1>li") var arr=u1.getElementsByTagName('li') alert(arr.length) var newli=document.createElement('li') newli.innerHTML='newli' u1.appendChild(newli) alert(arr.length) } //通过className查找元素 function myFun7() { var x = document.getElementsByClassName("bb"); for (var i = 0; i < x.length; i++) { x[i].style.backgroundColor = "red"; } } </script>
浏览器兼容性
- 版本较低的浏览器有会存在兼容性问题。
- 很多框架中封装了解决浏览器兼容性的问题的方法，比如JQ;使用合适的框架不但可以解决兼容性还可以节省很多时间，效率更高
- 在不用框架的情况下可以自己编写一个解决兼容性的函数，或者直接引用一个解决兼容问题的函数
- 相信随着浏览器的更新和语言的规范这些目前的兼容性问题未来很可能就不存在了
理解全局对象Global
- 全局属性和函数可用于所有内建的 JavaScript 对象。全局对象是所有全局方法的拥有者，用来统一管理全局方法，全局方法也就是全局函数。
- parseInt() 函数可解析一个字符串，并返回一个整数。
- parseFloat() 解析一个字符串并返回一个浮点数。
- 注意:可以将数字开头的字符串转换成数值，但是不可以转换非数字开头的字符串
- 如果指定的字符串中包含非数字字符，只要字符串开头的一部分符合整数的转换规则，则parseInt()函数会将这一部分字符串转化为整数(从字符串开头，直到遇到非数字字符为止)。如果字符串以非数字字符开头，则返回NaN。
- isNaN(x)函数用于检查其参数是否是非数字值。NaN 即 Not a Number
- 可用于判断其参数是否是 NaN，该值表示一个非法的数字
- 如果 x 是特殊的非数字值 NaN（或者能被转换为这样的值），返回的值就是 true。如果 x 是其他值,则返回 false。
- isNaN() 函数通常用于检测 parseFloat() 和 parseInt() 的结果，以判断它们表示的是否是合法的数字。当然也可以用 isNaN() 函数来检测算数错误，比如用 0 作除数的情况。
- ......
变量的作用范围
- 作用域是指有效范围，JS变量的作用域有全局和局部之分
- "全局变量"：申明在函数之外的变量
- "局部变量"：申明在函数体中的变量，并且只能在当前函数体内访问
- 如果函数内部有定义变量，即使在定义之前输出但会先执行后面定义语句，然后判断输出结果
- 全局变量的优点：可以减少变量的个数，减少由于实际参数和形式参数的数据传递带来的时间消耗。
- 全局变量缺点:使函数的代码可读性降低。由于多个函数都可能使用全局变量，函数执行时全局变量的值可能随时发生变化，对于程序的查错和调试都非常不利。
