js事件

回顾

1. String

属性
length
方法
indexOf()  
lastIndexOf()
substr(start, length)
substring(start, end)
slice(start, end)
split()
toUpperCase()
toLowerCase()
replace(旧，新)
trim()
search()   返回第一次匹配的位置  否则 -1
match()    返回数组   第一次匹配的内容 和 位置

2. Number

属性
Number.MAX_VALUE
Number.MIN_VALUE
方法
toFixed()  取整，保留指定位数的小数
toString()  转为字符串 指定进制

3. 数组

# 创建数组
var list = []   
var list = new Array()

# js数组特点
索引是连续
稀疏数组

# 添加元素
list.push()
list.unshift()
list.splice(offset, 0, 新元素)

# 删除元素
list.pop()
list.shift()
list.splice(offset,length)

# 修改元素的值
list[offset] = 新值
list.splice(offset, lenght, 值1，值2...)

# 数组对象的属性
length  

# 数组对象的方法
push()
pop()
shift()
unshift()
splice()
reverse()
sort()
join()  把数组拼接成字符串
concat()  拼接数组
indexOf()  
lastIndexOf()
forEach(callback)  遍历
map(callback)  返回一个新的数组
filter（callback） 返回一个新的数组 
every(callback)  返回布尔值
some(callback)  返回布尔值
reduce(callback(prev, val, index))  累计运算

#数组遍历
for 循环
for in
list.forEach

4 类数组对象

NodeList(元素的列表) \  arguments
遍历类数组对象
for 循环
[].forEach.call(类数组对象, function(){})

5 RegExp

# 定义正则
var r = /^\w$/

#正则方法
r.test(string) true/false
r.exec(string)  数组

6 Function

函数本身也是对象

f.call(对象，...)
f.apply(对象， 数组)

7 Math

#属性
Math.PI

#方法
Math.abs()
Math.pow()
Math.max()
Math.min()
Math.ceil()  进位取整 天花板
Math.floor() 舍位取整  地板
Math.round()  四舍五入
Math.random()  取随机数 0~1 顾头不顾尾

8 Date

new Date() 默认当前的时间
方法
getFullYear()
getMonth()  +1
getDate()
getDay()
getHours()
getMinutes()
getSeconds()
getMilliseconds()
getTime()
getUTC...
set...
setUTC..
setTime()

笔记

1. 事件

1.1 事件绑定

# 写在html元素中
<button onclick="code..."></div>

# 把事件当做元素对象的方法
btnEle.onclick = function(){
    
}

# 事件监听
btnEle.addEventListener('click', function(){
    
}, false)   fasle表示 冒泡阶段触发（默认）

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>事件的原理</title>
 6     <style>
 7         .active {
 8             background: pink;
 9         }
10     </style>
11 </head>
12 <body>
13     <h1>事件原理</h1>
14     <hr>
15     <button id="btn">按钮</button>
16 
17     <script>
18         //事件绑定在一个元素上  
19         //事件绑定
20 
21         var btn = document.querySelector('#btn');
22 
23         /*function demo(){
24             
25         }*/
26         //标准的绑定事件 添加事件监听 IE8不兼容   attachEvent('onclick', function)<==IE8
27         //绑定了监听事件，多个的话也会同时触发，只是显示有先后
28         //监听事件就是监听到你有click这个行为，后面的事件就会触发
29         //这样写可以有多个时间同时触发
30         btn.addEventListener('click', function(){
31             alert(100)
32         })
33 
34         btn.addEventListener('click', function(){
35             alert(200)
36         })
37 
38 
39         
40         //更常用
41         btn.onclick = function(){
42             this.classList.toggle('active');
43 
44         }
45 
46 
47     </script>
48 </body>
49 </html>

事件绑定

1.2 事件的捕获和冒泡

捕获阶段： 从祖先元素 到 子元素
冒泡阶段： 从子元素  到 祖先元素

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>事件的捕获和冒泡</title>
 6     <style>
 7         #wrapper {
 8             width: 200px;
 9             height: 200px;
10             border: 2px solid pink;
11             background-color: #ccc;
12         }
13         #inner {
14             width: 100px;
15             height: 100px;
16             margin: 50px;
17             background: green;
18         }
19     </style>
20 </head>
21 <body>
22     
23     <h1>同志交友</h1>
24     <hr>
25 
26     <div id="wrapper">
27         <div id="inner"></div>
28     </div>
29 
30 
31     <script>
32         //事件是在冒泡阶段触发的
33         var wrapperEle = document.querySelector('#wrapper');
34         var innerEle = document.querySelector('#inner');
35         // 为True是捕获，先触发祖先元素事件
36         wrapperEle.addEventListener('click',function(){alert('我是大的')},true);
37         innerEle.addEventListener('click',function(){alert('我是小的')},true);
38 
39 
40 
41         // wrapperEle.onclick = function(){
42         //     alert('我是大的');
43         // }
44 
45         // innerEle.onclick = function(event) {
46         //     alert('我是小的');
47         //     event.stopPropagation(); //阻止冒泡
48         // }
49     </script>
50 
51 </body>
52 </html>

事件的捕获和冒泡


事件默认在冒泡阶段触发

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>事件的捕获和冒泡</title>
 6     <style>
 7         #wrapper {
 8             width: 200px;
 9             height: 200px;
10             border: 2px solid pink;
11             background-color: #ccc;
12         }
13         #inner {
14             width: 100px;
15             height: 100px;
16             margin: 50px;
17             background: green;
18         }
19     </style>
20 </head>
21 <body>
22     
23     <h1>同志交友</h1>
24     <hr>
25 
26     <div id="wrapper">
27         <div id="inner"></div>
28     </div>
29 
30 
31     <script>
32         //事件实在冒泡阶段触发的
33         var wrapperEle = document.querySelector('#wrapper');
34         var innerEle = document.querySelector('#inner');
35 
36         wrapperEle.addEventListener('click', function(){
37             alert('我是大的');
38         }, true)
39 
40         innerEle.addEventListener('click', function(event) {
41             alert('我是小的');
42             event.stopPropagation(); //阻止冒泡
43         }, true)
44     </script>
45 
46 </body>
47 </html>

事件在捕获阶段触发情况

1.3 常用事件

# 鼠标事件
click       单击
dblcick      双击
contextmenu  右击
mouseenter    mouseover  鼠标悬停
mouseleave    mouseout   鼠标离开
mousedown   鼠标按键按下  
mouseup     鼠标按键抬起
mousemove   鼠标移动

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>事件</title>
 6     <style>
 7         
 8     </style>
 9 </head>
10 <body>
11     <h1>常用事件--鼠标事件</h1>
12     <hr>
13 
14     <script>
15         document.oncontextmenu = function(){
16             alert('啊，我被右击了');
17             return false; //阻止系统菜单 右键会弹出来的刷新页面
18         }
19     </script>
20 </body>
21 </html>

鼠标事件



# 键盘事件
keydown  键盘按键按下
keyup    键盘按键抬起
keypress  按键按下  只有可输入的按键才能触发

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>键盘事件</title>
 6     <style>
 7         #box {
 8             width: 100px;
 9             height: 100px;
10             background: pink;
11             position: absolute;
12         }
13     </style>
14 </head>
15 <body>
16     <div id="box" style="left:100px;top:200px"></div>
17 
18     <script>
19         //e.Keycode 查看键盘按键对应的ascii
20         document.onkeydown = function(e){
21             var boxEle = document.querySelector('#box');
22             switch (e.keyCode) {
23                 case 37: //左键
24                 //parseint解析一个字符串，并返回一个整数
25                 //不用Number是因为如果不是纯数字组成会返回NaN
26                     boxEle.style.left = (parseInt(boxEle.style.left) - 5) + 'px';
27                     break;
28                 case 38: //上键
29                     boxEle.style.top = (parseInt(boxEle.style.top) - 5) + 'px';
30                     break;
31                 case 39: //右键
32                     boxEle.style.left = (parseInt(boxEle.style.left) + 5) + 'px';
33                     break;
34                 case 40: //下健
35                     boxEle.style.top = (parseInt(boxEle.style.top) + 5) + 'px';
36                     break;
37                 default: 
38                     console.log(e.keyCode);
39             }
40         }
41     </script>
42 </body>
43 </html>

键盘事件

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>键盘事件</title>
 6     <style>
 7         input {
 8             width: 300px;
 9             padding: 10px;
10             border: 1px solid #ccc;
11             font-size: 16px;
12         }
13 
14         #res {
15             margin-top: 20px;
16         }
17     </style>
18 </head>
19 <body>
20     <input type="text" id="inputEle">
21     <div id="res"></div>
22 
23     <script>
24         
25         var inputEle = document.querySelector('#inputEle');
26         inputEle.onkeyup = function(){
27             document.querySelector('#res').innerHTML = this.value;
28         }
29     </script>
30 </body>
31 </html>

键盘事件2



# 表单事件
blur  失去焦点
focus  获取焦点
submit  提交 绑定给form元素
reset   重置 绑定给form元素
select  输入框内容被选中
change  内容改变切失去焦点   适合select 选项以改，触发
input   输出内容改变 触发

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>表单事件</title>
 6 </head>
 7 <body>
 8     <form action="1.php" id="myForm">
 9         用户名： <input type="text" id="userEle" name="username"> <br>
10         密码：   <input type="password" id="pwdEle" name="pwd"> <br>
11         <button>提交</button>
12         <input type="reset" value="重置">
13     </form>
14 
15 
16     <script>
17         var userEle = document.querySelector('#userEle');
18         var formEle = document.querySelector('#myForm');
19 
20         userEle.onblur = function() {
21             console.log('失去焦点啦');
22         }
23 
24         userEle.onfocus = function() {
25             console.log('获取焦点啦');
26             //在失去焦点的时候，验证内容合法性
27         }
28 
29         //选中输入框中的文字
30         userEle.onselect = function() {
31             console.log('啊，我被选了');
32         }
33 
34         //对于输入框，内容改变 并且失去焦点 （没用）
35         userEle.onchange = function() {
36             console.log('啊，我变了');
37         }
38 
39         //类似于 用的keyup 内容变化就触发   兼容性不好
40         userEle.oninput = function(){
41             console.log('啊，我变了');
42         }
43 
44 
45         //form表单的事件
46         formEle.onsubmit = function() {
47             alert('啊，我被提交了');
48             return false; //阻止表单提交
49         }
50     </script>
51 </body>
52 </html>

表单事件

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>地址联动</title>
 6     <style>
 7         select {
 8             width: 100px;
 9             padding: 5px;
10             font-size:16px;
11         }
12     </style>
13 </head>
14 <body>
15     <h1>选择地址</h1>
16     <hr>
17     <select id="prov"></select>
18     <select id="city"></select>
19 
20     <script>
21         //定义省市的信息
22         var provList = ['江苏','浙江','福建','湖南'];
23         var cityList = [];
24         cityList[0] = ['南京', '苏州', '宿迁', '扬州'];
25         cityList[1] = ['杭州', '温州', '宁波', '台州'];
26         cityList[2] = ['福州', '厦门', '泉州', '漳州'];
27         cityList[3] = ['长沙', '湘潭', '株洲', '湘西'];
28 
29         //获取select元素对象
30         var provSelect = document.querySelector('#prov');
31         var citySelect = document.querySelector('#city');
32 
33 
34         //把省的信息 添加到第一个select元素中
35         provList.forEach(function(val, index){
36             //DOM操作  了解
37             provSelect.add(new Option(val, index))
38         });
39 
40 
41         //给第一个select绑定change事件
42         provSelect.onchange = function(){
43             //获取 当前的选项
44             var index = this.value;
45 
46             //清空第二个select原先内容
47             citySelect.length = 0;
48 
49             //选择对应的城市列表，添加到第二个select
50             cityList[index].forEach(function(val, index){
51                 citySelect.add(new Option(val, index));
52             })
53         }
54 
55 
56         //手工触发一次 change事件
57         provSelect.onchange();
58 
59 
60 
61 
62 
63 
64     </script>
65 </body>
66 </html>

地址联动




# 文档事件
load      绑定给body 绑定给window 绑定给 img 、link、script   文档加载完成
unload    文档关闭
beforeunload  文档关闭之前

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>文档事件</title>
 6 </head>
 7 <body>
 8     <h1>文档事件</h1>
 9     <hr>
10     <!-- <img src="http://www.google.com/1.jpg" alt=""> -->
11 
12     <script>
13         window.onload = function(){
14             //一些操作 必须等到页面中 所有的内容 加载完毕
15             console.log('页面加载完毕');
16         }
17 
18 
19         window.onbeforeunload = function(){
20             return '你确定要离开我码？';
21         }
22     </script>
23 </body>
24 </html>

文档事件



# 图片事件
load   图片加载完毕
error  图片加载错误
abort  图片加载中断

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>图片事件</title>
 6     <style>
 7         #imgList img {
 8             width: 300px;
 9             height: 200px;
10         }
11     </style>
12 </head>
13 <body>
14     <h1>图片事件</h1>
15     <hr>
16 
17     <div id="imgList">
18         <img src="dist/images_one/meinv02.jpg" alt="">
19         <img src="dist/images_one/2.jpg" alt="">
20         <img src="dist/images_one/3.jpg" alt="">
21         <img src="dist/images_one/4.jpg" alt="">
22         <img src="dist/images_one/41.jpg" alt="美图">
23         <img src="dist/images_one/7.jpg" alt="">
24         <img src="dist/images_one/8.jpg" alt="">
25     </div>
26 
27     <script>
28         //获取所有图片的列表
29         var imgs = document.querySelectorAll('#imgList img');
30 
31         //给每个img元素绑定 error 事件
32         for (var i = 0; i < imgs.length; i ++) {
33             imgs[i].onerror = function() {
34                 this.src = 'dist/images_two/11.jpg'
35             }
36         }
37     </script>
38 </body>
39 </html>

图片事件


# 其他事件
scroll   滚动
resize   大小调整

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>其他事件</title>
 6 </head>
 7 <body>
 8     <div style="height:20000px"></div>
 9     <script>
10         window.onscroll = function(){
11             console.log('页面在滚动');
12         }
13 
14         window.onresize = function(){
15             console.log(window.innerWidth, window.innerHeight)
16         }
17     </script>
18 </body>
19 </html>

其他事件

1.4 Event对象事件对象

属性
clientX  鼠标的坐标
clientY  鼠标的坐标
keyCode  键盘的按键 ascii码
button   鼠标按键  0 1 2
target   返回元素  具体触发的元素

方法
stopPropagation()  阻止事件冒泡
preventDefault()   阻止元素的默认事件

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>事件对象</title>
 6 </head>
 7 <body>
 8     <h1>event对象</h1>
 9     <hr>
10     <form action="1.php">
11         <button id="btn">按钮</button>
12     </form>
13     <script>
14         
15         var btn = document.querySelector('#btn');
16 
17         btn.onclick = function(event){
18             alert('啊，我被点击了');
19             event.preventDefault(); //阻止元素的 默认动作
20         }
21 
22 
23         document.onclick = function(event) {
24             console.log(event.target)
25         }
26     </script>
27 </body>
28 </html>

event事件对象

2. BOM 浏览器对象模型

2.1 window

#属性
window.innerWidth   窗口的宽
window.innerHeight  窗口的高
history
location
screen
navigator

# 方法
setInterval()
clearInterval()
setTimeout()
clearTimeout()
Number()
String()
Boolean()
alert()
confirm()
prompt()

2.2 history

属性
length  

方法
back() 后退一步
forward()  前进一步
go(1)  前进/后退 n 步

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>window</title>
 6 </head>
 7 <body>
 8     <button onclick="history.back()">上一步</button>
 9     <button onclick="history.forward()">下一步</button>
10     <button onclick="history.go(-2)">上两步</button>
11     <button onclick="history.go(1)">下1步</button>
12 
13     <hr>
14 
15     <a href="http://www.baidu.com">百度</a>
16 
17     <script>
18         console.log(history)
19         console.log(window.history)
20 
21 
22         console.log(history.length); //历史记录的长度
23 
24     </script>
25 </body>
26 </html>

history

2.3 location

属性
href
protocol
host
hostname
port
pathname
search
hash

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>location</title>
 6 </head>
 7 <body>
 8     <script>
 9         console.log(location)
10         console.log(location.href)
11         console.log(location.protocol)
12         console.log(location.host);  //主机名和端口
13         console.log(location.hostname)
14         console.log(location.port)
15         console.log(location.pathname)
16         console.log(location.search)
17         console.log(location.hash)
18 
19 
20         //location.href= "1.html"
21         location.hash = '#哈哈哈'
22     </script>
23 </body>
24 </html>

location

2.4 screen

屏幕

2.5 navigator

属性
userAgent

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>navigator</title>
 6 </head>
 7 <body>
 8     <script>
 9         //输出浏览器配置信息
10         console.log(navigator.userAgent)
11     </script>
12 </body>
13 </html>

navigator

3. DOM 文档对象模型

3.1 常见的dom对象

所有的元素对象 都是dom
document  dom对象 表示整个文档
document.body  获取body元素
document.documentElement  获取HTML元素

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>DOM</title>
 6     <style>
 7         #box {
 8             padding: 20px;
 9             width: 600px;
10             border: 1px solid #ccc;
11         }
12         #box1 {
13             padding: 20px;
14             width: 600px;
15             border: 1px solid #ccc;
16         }
17     </style>
18 </head>
19 <body>
20     <div id="box">
21         <p>Lorem ipsum dolor sit amet.</p>
22         <p>Lorem ipsum dolor sit amet.</p>
23         <p>Lorem ipsum dolor sit amet.</p>
24     </div>
25     <div id = "box1"></div>
26 
27 
28     <script>
29         var box = document.querySelector('#box');
30         var box1 = document.querySelector('#box1');
31 
32         //innerHTML输出到控制台是带标签的，
33         console.log(box.innerHTML)
34         console.log(box1.innerText)
35 
36 
37         box.innerHTML = '<ul><li>HELLO</li></ul>'
38         box.innerText = '<ul><li>HELLO123</li></ul>'
39     </script>
40 </body>
41 </html>

常见的dom对象

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>todoList</title>
 6     <style>    
 7         #todoList {
 8             list-style: none;
 9             margin:10px 0px;
10             padding:0;
11             width:600px;
12         }
13         #todoList li {
14             margin-bottom:5px;
15             padding: 10px;
16             border: 1px solid #ccc;
17             background:#f5f5f5;
18             position: relative;
19         }
20         input {
21             padding:10px;
22             font-size:16px;
23             border:1px solid #ccc;
24         }
25         button {
26             padding:10px 20px;
27             border:1px solid #ccc;
28             background: #f5f5f5;
29             outline: none;
30             cursor: pointer;
31         }
32 
33         #todoList span {
34             position: absolute;
35             right: 10px;
36             cursor: pointer;
37         }
38     </style>
39 </head>
40 <body>
41     <input type="text" id="content"> 
42     <button id="btn">添加</button>
43     <ul id="todoList">
44         <li>取钓鱼 <span>&times;</span></li>
45         <li>取洗澡 <span>&times;</span></li>
46         <li>取吃饭 <span>&times;</span></li>
47         <li>去睡觉 <span>&times;</span></li>
48     </ul>
49 
50 
51     <script>    
52         var input = document.querySelector('#content');
53         var btn = document.querySelector('#btn');
54         var todoList= document.querySelector('#todoList');
55         var spans = document.querySelectorAll('#todoList span');
56 
57 
58         btn.onclick = function(){
59             //获取 input的内置
60             var text = input.value;
61 
62             //创建li元素 并给li元素添加包裹 内容
63             var li = document.createElement('li');
64             li.innerText = text;
65             var span = document.createElement('span');
66             span.innerHTML = '&times;';
67             li.appendChild(span);
68 
69             //把li元素添加到ul中
70             todoList.appendChild(li);
71         }    
72 
73 
74         /*spans.forEach(function(span){
75             span.onclick = function(){
76                 todoList.removeChild(this.parentNode)
77             }
78         })*/
79 
80         //委派方式绑定
81         todoList.onclick = function(event) {
82             if (event.target.nodeName === 'SPAN') {
83                 this.removeChild(event.target.parentNode);
84             }
85         }
86     </script>
87 </body>
88 </html>

纯dom操作-todolist

3.3 元素内容

innerHTML 标签也会被输出
innerText 只会输出其中的文本内容

posted @ 2018-08-14 17:30 Roc_Atlantis 阅读(271) 评论(0) 编辑收藏举报

刷新页面返回顶部

js事件

回顾

1. String

2. Number

3. 数组

4 类数组对象

5 RegExp

6 Function

7 Math

8 Date

笔记

1. 事件

1.1 事件绑定

1.2 事件的捕获和冒泡

1.3 常用事件

1.4 Event对象 事件对象

2. BOM 浏览器对象模型

2.1 window

2.2 history

2.3 location

2.4 screen

2.5 navigator

3. DOM 文档对象模型

3.1 常见的dom对象

3.3 元素内容

公告

1.4 Event对象事件对象