first commit
This commit is contained in:
commit
b37417dedb
47
20190925/20190925.md
Normal file
47
20190925/20190925.md
Normal file
@ -0,0 +1,47 @@
|
||||
# 20190925
|
||||
|
||||
|
||||
|
||||
* 给任意元素添加监听器封装函数
|
||||
```js
|
||||
function addEventListener(ele,type,fn) {
|
||||
if(ele.addEventListener) {
|
||||
ele.addEventListener(type,fn,false)
|
||||
} else if (ele.attachEvent) {
|
||||
ele.attachEvent('on' + type, fn)
|
||||
} else {
|
||||
ele['on' + type] = fn
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
* 给任意事件解绑监听器封装函数
|
||||
|
||||
```js
|
||||
//如需解绑监听器，则添加事件必须为命名函数
|
||||
function removeEventListener(ele, type, fn) {
|
||||
if(ele.removeEventListener) {
|
||||
ele.removeEVentListener(type, fn, false)
|
||||
} else if (ele.detachEvent) {
|
||||
ele.detachEvent('on' + type, fn)
|
||||
} else {
|
||||
ele['on' + type] = fn
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
* 阻止事件冒泡
|
||||
|
||||
```js
|
||||
//e | window.event ：事件参数对象，前者是w3c，后者IE
|
||||
|
||||
//google,ie8 | firefox不支持
|
||||
//火狐不支持 window.event
|
||||
window.event.cancelBubble = true;
|
||||
e.cancelBubble = true;
|
||||
|
||||
//w3c firefox,google | ie8不支持
|
||||
e.stopPropagation();
|
||||
|
||||
```
|
||||
52
20190926/20190926.html
Normal file
52
20190926/20190926.html
Normal file
@ -0,0 +1,52 @@
|
||||
<!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>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.search {
|
||||
width: 430px;
|
||||
height: 42px;
|
||||
margin: 150px auto;
|
||||
}
|
||||
.search .txt {
|
||||
width: 360px;
|
||||
height: 42px;
|
||||
border: 1px #ccc solid;
|
||||
line-height: 42px;
|
||||
padding: 0px 5px;
|
||||
box-sizing: border-box;
|
||||
font-size: 14px;
|
||||
color:#282828;
|
||||
}
|
||||
.search .btn {
|
||||
display: inline-block;
|
||||
width:60px;
|
||||
height: 42px;
|
||||
background: skyblue;
|
||||
line-height: 42px;
|
||||
text-align: center;
|
||||
color: #000;
|
||||
font-size: 14px;
|
||||
text-decoration: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="search" id="search">
|
||||
<input type="text" name="" id="txt" class="txt">
|
||||
<a href="javascript:;" class="btn">搜索</a>
|
||||
</div>
|
||||
<script>
|
||||
function my$(id) {
|
||||
return document.getElementById(id);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
47
20190926/20190926.md
Normal file
47
20190926/20190926.md
Normal file
@ -0,0 +1,47 @@
|
||||
# 20190925
|
||||
|
||||
|
||||
[linkToHtml](./20190926.html)
|
||||
|
||||
* 事件的阶段
|
||||
* e.eventPhase 通过这个知道之间的阶段
|
||||
1. 事件捕获 => 从外向里
|
||||
2. 目标阶段 =>
|
||||
3. 冒泡阶段 => 从里向外
|
||||
|
||||
* 绑定事件 addEventListener('不带on的事件类型',函数,<控制事件阶段>)
|
||||
* <控制事件阶段> => false => 冒泡阶段
|
||||
* <控制事件阶段> => true => 事件捕获
|
||||
|
||||
```js
|
||||
// 前提 div.box1>div.box2>div.box3,且各个div绑定打印id的点击事件
|
||||
my$('box3').addEventListener('click',fn,false);
|
||||
// box3 -> box2 -> box1
|
||||
my$('box3').addEventListener('click',fn,true);
|
||||
// box1 -> box2 -> box3
|
||||
```
|
||||
|
||||
* onmouseover|out 鼠标移入移出事件
|
||||
|
||||
* e.type 获取当前事件
|
||||
```js
|
||||
my$('btn').onclick = f1;
|
||||
my$('btn').onmouseover = f1;
|
||||
my$('btn').onmouseout = f1;
|
||||
|
||||
function f1(e) {
|
||||
switch(e.type){
|
||||
case 'click':
|
||||
//点击TODO
|
||||
break;
|
||||
case 'mouseover':
|
||||
//鼠标移入TODO
|
||||
break;
|
||||
case 'mouseout':
|
||||
//鼠标移出TODO
|
||||
break;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
* a标签 href属性为 javascript:; 阻止默认事件
|
||||
33
20191009/20191009.md
Normal file
33
20191009/20191009.md
Normal file
@ -0,0 +1,33 @@
|
||||
# 20191009
|
||||
|
||||
|
||||
|
||||
|
||||
* window
|
||||
* 所有变量属于window
|
||||
* name,top 属于window自有属性，不可声明
|
||||
* 属性以及方法`<window.>functionName`可以省略window
|
||||
* `window.confirm();`模态框，返回Boolean
|
||||
* `window.promit('str',defaultStr);`输入框返回str
|
||||
* `window.onload` 页面加载完成事件
|
||||
* `window.onunload` 页面关闭之后
|
||||
* `window.onbeforeunload` 页面关闭之前
|
||||
|
||||
* BOM
|
||||
* location
|
||||
* href 页面跳转
|
||||
* hash 地址#后边的内容
|
||||
* host 主机和端口号
|
||||
* hostname 主机名
|
||||
* pathname 文件路径(相对路径)
|
||||
* port 端口
|
||||
* protocol 协议
|
||||
* search ?后边的内容(参数)
|
||||
* `assign(<hrefStr>)` 跳转页面方法
|
||||
* `replace(<hrefStr>)` 无记录跳转
|
||||
* reload 重载
|
||||
|
||||
* history
|
||||
* `go(<number>)` 页面跳转`<number>`个
|
||||
* `back()` 回退
|
||||
* `forward()` 前进
|
||||
3
20191013/20191013.md
Normal file
3
20191013/20191013.md
Normal file
@ -0,0 +1,3 @@
|
||||
# 20191013
|
||||
|
||||
|
||||
43
README.md
Normal file
43
README.md
Normal file
@ -0,0 +1,43 @@
|
||||
# 吉软大前端笔记本
|
||||
|
||||
## 20190925
|
||||
|
||||
|
||||
[linkToMd](./20190925/20190925.md)
|
||||
|
||||
* 给任意元素添加监听器封装函数
|
||||
* 给任意事件解绑监听器封装函数
|
||||
* 阻止事件冒泡
|
||||
|
||||
---
|
||||
|
||||
## 20190926
|
||||
|
||||
|
||||
[linkToMd](./20190926/20190926.md)
|
||||
|
||||
* 事件的阶段
|
||||
* 绑定事件 addEventListener('不带on的事件类型',函数,<控制事件阶段>)
|
||||
* onmouseover|out 鼠标移入移出事件
|
||||
* e.type 获取当前事件
|
||||
* a标签 href属性为 javascript:; 阻止默认事件
|
||||
|
||||
---
|
||||
|
||||
## 20191009
|
||||
|
||||
|
||||
[linkToMd](./20191009/20191009.md)
|
||||
|
||||
* window
|
||||
* history
|
||||
* location
|
||||
|
||||
---
|
||||
|
||||
## 20191013
|
||||
|
||||
|
||||
[linkToMd](./20191013/20191013.md)
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user