移动端基础事件和交互【分分快三计划】

作者:分分快三计划

并且子元素box有被父元素overflow隐藏的部分

7.自定义右键菜单

三:阻止默认事件和阻止冒泡
e.preventDefault();//阻止默认事件
e.stopPropagation();//阻止冒泡事件

子元素高度 1500px

//onkeypress

  1. 不会存在前后覆盖问题
  2. 在chrome的模拟器下可以一直识别

 

btn.onmouseup=function() {

console.log("onmouseup");

}

阻止掉:document touchstart的默认事件,可以解决一下问题:
    1. 阻止页面上的文字被选中    -- 可以通过阻止冒泡使某个元素上的文字被选中
    2. 阻止页面上的系统菜单

隐患:    页面上的所有滚动条失效  

ie 678  event.cancelBubble=true;

//鼠标双击事件

div {

position: absolute;
left: 0;
top: 0;
width: 200px;
height: 200px;
background: rgba(204,255,0,.5);

}
</style>
<script>

//事件点透,两个元素上的事件都没被触发

//阻止浏览器默认事件
//document.addEventListener(
// "touchmove",
// function(e) {
// e.preventDefault();//阻止默认事件
// }
//);

window.onload = function () {
var div = document.querySelector("#div");
/*
PC端鼠标事件 在移动端也可以正常使用,但是注意 事件的执行 会有300ms的延迟

    事件点透:
        1. 在移动端 PC事件 有 300ms的延迟
        2. 我们点击了页面之后,浏览器会记录点击下去的坐标
        3. 300ms后,在该坐标找到现在在这的元素 执行事件
    解决办法:
        1. 阻止默认事件   (部分安卓机型不支持)
        2. 不在移动端使用鼠标事件,不用a标签做页面跳转
*/
div.addEventListener(
    "touchend",
    function (e) {
    //这里不加入阻止默认事件,会发生点透事件,点div但是在百度汉字上,div消失后同时会触发跳转
        //你可以尝试把这个去掉看一下效果
        e.preventDefault();
        this.style.display = "none";
    }
);

};
</script>
</head>
<body>
<a href=";
<div id="div"></div>
</body>
</html>

四.防止误触事件

原理是:比方你对某刻元素设置了touchend事件,但是有时候我们会手指在这个元素上移动一下,没有想要触发这个事件,所以要进行判断,如果用户是移动则不触发这个事件.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,user-scalable=no" />
<title>无标题文档</title>
<style>
a {
display: block;
width: 50px;
height: 50px;
background: red;
color: #fff;
margin: 20px;
}
</style>
<script>
document.addEventListener(
"touchstart",
function(e) {
e.preventDefault();
}
);
window.onload = function () {
var a = document.querySelectorAll("a");
//对每一个a标签添加touchmove事件,
for(var i = 0; i < a.length; i ) {
a[i].addEventListener(
"touchmove",
function() {
this.isMove = true;//定义一个变量来标识用户是否在元素上移动,
}
);

    //防止误触原理是,防止移动结束时触发此事件

    a[i].addEventListener(
        "touchend",
        function() {
            //如果是移动就不会走if里边的事件.
            if(!this.isMove) {
                window.location.href = this.href;
            }
            this.isMove = false;
        }
    );
}

};
</script>
</head>
<body>
<a href=";
<a href=";
<a href=";
<a href=";
<a href=";
</body>
</html>

四:
tocuhEvent事件
touches 当前屏幕上的手指列表
targetTouches 当前元素上的手指列表
changedTouches 触发当前事件的手指列表

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,user-scalable=no" />
<title>无标题文档</title>
<style>
body {
margin: 0;
}

});

5.元字符s验证空格

var     str="    hello world, 哈哈哈     "

var      reg=/s /g;

str = str.replace(reg, "*");//这样写会把多个空格换成一个*

alert(str);

把多个空格换成多个*

str=str.replace(reg,function(s) {

//alert("(" s ")");

//return   "*";

var  str=" ";

for(var  i=0; i<s.length; i ) {

str ="*";

}

return     str;

})

alert(str);

//阻止系统的默认事件
document.addEventListener(
"touchstart",
function(e) {
e.preventDefault();
}
);
e.preventDefault(); 阻止默认事件

document.addEventListener("touchmove",function(event){

2. 节点复制

cloneNode(boolean) 节点复制

true 深复制,复制节点本身以及子节点树

false浅复制,只复制节点本身

cloneNode 方法复制不会将原有元素中添加的js属性复制过去,但是css属性可以复制过去,通过js添加的css属性也可以复制过去

var   div=document.getElementsByTagName("div")[0];

var   newDiv=div.cloneNode(true);

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,user-scalable=no" />
<title>无标题文档</title>
<style>

 

onchange 当表单元素的值发生变化时触发

var   Form=document.getElementById("form");

Form.onchange=function() {

console.log("onchange");

}

一:移动端基础事件
1.touchstart 手指触摸 == mousedown
2.touchend 手指抬起 == mouseup
3.touchmove 手指抬起 == mousmove
touch事件 在 chrome的模拟器下,部分版本 通过on的方式来添加事件无效所以在移动端一般都使用如下方式addEventListener("事件名",函数,冒泡或捕获);

当你鼠标没有在子元素上点击 移动 松开鼠标  (向上拉的时候)

3.键盘事件

//键盘按下事件

三.事件点透
需要大家把这个代码复制到自己编译器上,在谷歌中打开,f12手机端进行调试.

 

//鼠标按下就会触发

box {

width: 200px;
height: 200px;
background: red;
color: #fff;
font-size: 30px;

}
</style>
<script>
document.addEventListener(
"touchstart",
function(e) {
e.preventDefault();
}
);
/*
touches 当前屏幕上的手指列表
targetTouches 当前元素上的手指列表
changedTouches 触发当前事件的手指列表
*/
window.onload = function () {
var box = document.querySelector("#box");
box.addEventListener(
"touchend",
function (e){
this.innerHTML = e.touches.length;
}
);
};
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>

 event.preventDefault();   //阻止默认行为

阻止冒泡   ev.cancelBubble = true;

二:事件冒泡和捕获
addEventListener("事件名",函数,false或true);
False 冒泡 :点击元素 他会把这个事件一直向上传递 从下向上传递True
捕获 :从上向下传递

这样

document.onkeyup=function() {

console.log("onkeyup");

}

//addEventListen可以同时对一个元素添加多个事件
element.addEventListener(
"touchstart",
function() {
console.log(1);
}
);
element.addEventListener(
"touchstart",
function() {
console.log(2);
}
);
//还可以定义函数,然后直接写函数名
element.addEventListener(
"touchstart",
fn
);
function fn() {
console.log(3);
}

就会出现图片展示的问题

ev.preventDefault();//不兼容IE6~8

}

}

这时候就是document 文档的默认touchmove 事件 的默认行为在整事了

console.log(ev.key);

不知道你们遇没遇到过这个问题  就是当你给一个元素

//鼠标抬起时触发

分分快三计划 1

btn.onclick=function(){

console.log("onclick");

}

父元素高度 500px

menu.addEventListener("contextmenu",function(event) {

varev=event||window.event;

ev.cancelBubble=true;

varLeft=ev.clientX (menu.offsetWidth-(ev.clientX-menu.offsetLeft));

menu2.style.left=Left "px";

menu2.style.top=ev.clientY "px";

menu2.style.display="block";

ev.preventDefault();

},false)

然后box 的touchmove 事件 最好阻止下冒泡

12.正则的使用方法

replace 字符串方法, 用于匹配正则, 将满足的内容用新内容进行替换

replace(reg, “替换的新内容”)

replace(reg, 回调函数)

match 字符串方法, 用与匹配正则, 返回值数组

reg.test(字符串) 正则验证, 满足正则匹配返回true, 否则返回false

-

添加touchstart  touchmove  touchend 的时候 

//鼠标点击触发

比如box

四、正则表达式

正则,是一种高准确性匹配 字符串 的方式

元字符 既定格式 [] 量值

将以下字符串中的数字提取出来[123, 45, 45];

var   str="123fajdj45dawkn45";

var    reg=/d /g;

var     arr=str.match(reg);

alert(arr);

event.stopPropagation():

7.转义

转义,将有意义的加反斜杠变成无意义的,将无意义的加反斜杠变成有意义的

alert("hahaha\\n哈哈\哈");

var   str="1/23 456";

// 在正则中有具体含义

var    reg=/ /;

var     reg=///;

str=str.replace(reg,"*");

alert(str);

 

插入、 替换、 移除方法:document.body.insertBefore(node, targetNode)

1.正则创建方法

第一种,使用直接量创建

var    reg=/正则的表达式/正则的属性;

第二种,使用对象创建

exp expression 描述表达式

var   reg=new   RegExp(正则的表达式,正则的属性);

removeEventListener(事件名称 , 函数,捕获 )解除绑定

解除绑定时,为了方便操作,最好把绑定的事件,加上函数名

第一个参数,事件名称,不要带on,带引号

第二个参数,为监听者,就是具体的功能代码

第三个参数,为true或者false,false冒泡如果是冒泡,事件从响应元素逐渐往上传递;true下沉如果是下沉,事件是从下级逐级往下沉,一直到响应元素

如果是直接绑定事件默认是冒泡

window.addEventListener("load",function() {

alert("a");

},false)

IE下使用attachEvent(事件名称,函数)方法绑定事件

detachEvent(事件名称,函数)解除绑定

第一个参数为事件类型,要带on,带引号

第二个参数,为监听者,就是具体的功能代码

window.attachEvent("onload", function() {

alert("a");

})

createElement("标签名"): 创建新元素

3.元字符w

w 只能匹配 数字、字母、下划线

是连续的意思,只要满足正则验证的字符都会拼接在一起,一旦遇到不满足的自动与后面的断开,再次遇到满足的时候,自动开启链接

var   str="123 das$ $jkdFF FF78_= $%^ff6";

var   reg=/w /g;

var   arr=str.match(reg);

alert(arr);

1.节点操作

使用DOM创建p标签,一定要注意创建者为document

将h3换成一个h1,replaceChild,将父节点中的h3用h1替换,h3和h1是单个变量

var   h1=document.createElement("h1");

h1.innerHTML="我是h1";

div.replaceChild(h1, h3);

2.鼠标按下、抬起、点击、双击事件

二、事件对象

document.onclick=function(event) {

//event     火狐,需要传参数

//window.event     chrome

var    ev=event||window.event;

//window.event获取事件对象

console.log(ev);

//网页标题

document.title=ev.clientX;

//clientX clientY 获取的值是鼠标距离可视化窗口的左右的偏移距离

}

获取cookie的函数

function    getCookie(name) {

//获取cookie

var   cookie=document.cookie;

//将cookie按照; 进行分割得到一个数组

var   arr1=cookie.split("; ");

for(var  i=0; i<arr1.length; i ) {

//将数组里的每一项按照等号再次进行分割

var     arr2=arr1[i].split("=");

if(name==arr2[0]) {

return    arr2[1];

}}}

//console.log(getCookie("hobby"));

remove(),直接删除

replaceChild(newNode, oldNode): newNode替换节点oldNode

非ie所支持的获取非行间样式的方法:getComputedStyle

//阻止右键菜单ev.preventDefault();

//return false虽然全兼容,但是不能阻止使用add绑定的额事件

//这里用return false不行

//return false;

//preventDefault()都可以阻挡

ev.preventDefault();

},false)

把默认的右键菜单阻止之后,再重新定义

//右键菜单

8.元字符汉字

var   str="jdsdlk瓜哥love尿哥";

//搜索所有的汉字u4e00-u9ef8

var reg=/[u4e00-u9ef8]/g;

var arr=str.match(reg);

alert(arr)

//搜索指定的汉字

var reg=/哥/g;

var arr=str.match(reg);

alert(arr)

var reg=/瓜/g;

str=str.replace(reg,"火");

alert(str)

removeChild(node): 移除父节点的某个子节点

//键盘的抬起事件

10.元字符-开头结尾

^n    原字符串以n开头才满足正则验证

n$    原字符串以n结尾才满足正则验证

var      str="     #user   p ";  

//var reg=/^s /;

//var reg=/s $/;

var     reg=/^s |s $/g;

str=str.replace(reg,"");

reg=/s /g;

str=str.replace(reg," ")

alert(str);

//阻止默认操作,全兼容

5.绑定事件

6.元字符b边界搜索

b代表边界搜索,单词边界,会自动检测单词是否是独立单词,只要左右两边有分界线,就可以找出来

//把单个he找出来

var    str="he-hello    world he hello";

var   reg=/bheb/g;

//var arr = str.match(reg);

//alert(arr);

str=str.replace(reg,"*");

alert(str);

addEventListener(事件名称 , 函数,捕获 )方法绑定事件

用法: 对象.currentStyle.样式名,例: oDiv.currentStyle.width

一、DOM

什么是DOM?Document Object Model(文档对象模型)。DOM是针对HTML和XML文档的一个API(Application Programming Interface应用程序编程接口)。DOM描绘了 一个层次化的节点树,允许开发人员添加、移除和修改页面的 某一部分。

childNodes 子节点集合(包含文本节点、注释节点、标签节点)

children子节点集合,但是只包含标签节点

firstChild 子节点集合中的第一个节点,任意类型

firstElementChild 子节点集合中的第一个标签节点

lastChild 子节点集合中的最后一个节点,任意类型

lastElementChild 子节点集合中的最后一个标签节点

nextSibling 同级以下相邻的第一个节点,任意类型

nextElementSibling 同级以下第一个节点标签节点

previousSibling同级以上相邻的第一个节点,任意类型

previousElementSibling同级以上第一个节点标签节点

nodeName节点名称

nodeType节点类型 (1元素节点,3文本节点,8注释节点,10doctype节点)

parentNode父节点,肯定是标签节点

parentElement 父节点,肯定是标签节点

//键盘长按事件

例: getComputedStyle(oDiv, null).color

getComputedStyle是一个函数,想获取哪个的样式就把哪个当参数传进去

console.log(getComputedStyle(div).width);


//document.oncontextmenu

document.addEventListener("contextmenu",function(event) {

var    ev=event||window.event;

alert("oncontextmenu");

//聚焦与失焦事件 onfocus onblur

var   Txt=document.getElementById("txt");

Txt.onfocus=function() {

this.value="onfocus";

}

Txt.onblur=function() {

this.value="onblur";

}

console.log(ev.code);

//return false;

//阻止默认操作,推荐使用的

封装设置cookie的函数

function    setCookie(name,value,day) {

var  now= new   Date();

var   days=now.getDate();

now.setDate(days day);

document.cookie=name "=" value ";expires=" now;}

//setCookie("wakaka", "doudou", 3)

三、cookie

cookie用来存储数据(保存在浏览器里面),cookie储存的数据类型为数字或者字符串,cookie存储的数据容量为5KB,1KB为1024个字节,1个字节8个二进制。

Firefox每个域名cookie限制为50个。

Opera每个域名cookie限制为30个。

Safari/WebKit貌似没有cookie限制。但是如果cookie很多,则会使header大小超过服务器的处理的限制,会导致错误发生。

当Cookie已达到限额,自动踢除最老的Cookie,以使给最新的Cookie一些空间。Internet Explorer和Opera使用此方法。

Firefox很独特:虽然最后的设置的Cookie始终保留,但似乎随机决定哪些cookie被保留。似乎没有任何计划(建议:在Firefox中不要超过Cookie限制)。

不同浏览器间cookie总大小也不同:

Firefox和Safari允许cookie多达4097个字节,包括名(name)、值(value)和等号。

Opera允许cookie多达4096个字节,包括:名(name)、值(value)和等号。

Internet Explorer允许cookie多达4095个字节,包括:名(name)、值(value)和等号。

注:多字节字符计算为两个字节。在所有浏览器中,任何cookie大小超过限制都被忽略,且永远不会被设置。

储存cookie

document.cookie="user=coco";

document.cookie="password=12345";

//创建日期

var   nowDate= new   Date();

var   days=nowDate.getDate();

//往后推迟三天

nowDate.setDate(days 3);

//cookie设置时不能直接设置中文,需要先对中文进行编码,显示时再进行解码

document.cookie="hobby=popo;expires=" nowDate;

如果设置了中文转码需要加上decodeURI();当获取到内容的时候,一定要进行编码,否则会出现中文乱码问题。decodeURI

封装的关于cookie的函数:

createTextNode(""): 创建文本节点

appendChild(node): 向childNodes末尾插入一个节点node

滚轮事件封装的函数

function   mouseWheel(obj,fn) {

//嗅探

var   ff=navigator.userAgent.indexOf("Firefox");

if(ff!= -1) {

obj.addEventListener("DOMMouseScroll", wheel,false);

}else{

obj.onmousewheel=wheel;

}

function   wheel(event) {

var    ev=event||window.event;

//滚轮往下滚是true

var   down=true;

if(ev.detail) {

down=ev.detail>0

}else{

down=ev.wheelDelta<0;

}

//通过down来执行相应的代码

//让fn执行,并且让ev和down作为参数传进去

fn(ev, down);//函数调用

}

}

//保存box原有的宽高

var  boxW=box.clientWidth;

var   boxH=box.clientHeight;

//函数回调

mouseWheel(box, scaleSize);

function    scaleSize(event,down) {

if(down) {

if(boxW>=500&&boxH>=500) {

boxW=500

boxH=500

}

boxW =10;

boxH =10;

box.style.width=boxW "px";

box.style.height=boxH "px";

}else{

if(boxW<=150&&boxH<=150) {

boxW=150

boxH=150

}

boxW-=10;

boxH-=10;

box.style.width=boxW "px";

box.style.height=boxH "px";

}

}


ie所支持的获取非行间样式的方法:currentStyle

1.鼠标移入移出事件

onmouseover、onmouseout:鼠标移动到自身时候会触发事件,同时移动到其子元素身上也会触发事件

onmouseenter、onmouseleave:鼠标移动到自身是会触发事件,但是移动到其子元素身上不会触发事件

div.onmouseover=function(){

console.log("移入");

}

div.onmouseout=function(){

console.log("移出");

}

div.onmouseenter=function(){

console.log("移入");

}

div.onmouseleave=function(){

console.log("移出");

}

11.量词

var   str="123jkds67xak0ld45643";

//n 至少包含一个n

//var reg=/d /g;

//n* 包含0个或者多个n

//var reg=/d*/g;

//n? 包含0个或一个n

//var reg=/d?/g;

//n{数值X}包含x个n

//var reg=/d{3}/g;

//n{x,y} 包含x个到y个n,x必填代表下限,y可选,如果不填,上限灵活

//{2,} 至少2个,多的无上限

//包含1个2个3个d

//var reg=/d{1,3}/g;

var   arr=str.match(reg);

alert(arr);

浏览器嗅探

var    FF=navigator.userAgent.indexOf("Firefox"); 

//绑定事件wheel,注意兼容

if(FF!= -1) {

box.addEventListener("DOMMouseScroll", wheel,false)

}else{

box.onmousewheel=wheel;

}

function   wheel(event) {

var   ev=event||window.event;

//捕捉到滚动的方向

//console.log(ev);

//谷歌

//console.log(ev.wheelDelta);

//火狐

//console.log(ev.detail);

if(ev.detail) {

if(ev.detail>0) {

console.log("往下滑")

}else{

console.log("往上滑")

}

}else{

if(ev.wheelDelta>0) {

console.log("往上滑")

}else{

console.log("往下滑")

}

}

}

//阻止默认的事件

2.元字符 . (点)

元字符 . (点)匹配字符串中的所有字符,但是换行符不行(n)

var     str="jdahj434n882$482hfjff334j ===54--eud";

var     reg=/./g;

var      arr=str.match(reg);

alert(arr);

8.函数回调

函数回调就是函数的参数为函数

函数回调一般用在,当在一个函数内部特定条件下需要触发另一个事件,

此时可以将函数作为一个参数传进来

function   sum1(a,b) {

return   a b;

}

function    getValue(a,b,fn) {

return    fn(a, b);

}

console.log(getValue(10,20, sum1));

4.表单事件

4.js获取非行间样式

appendChild,在父节点的childNodes数组的末尾添加一个新的节点

var   p=document.createElement("p");

p.innerHTML="我是新加的段落";

div.appendChild(p);

var   p=document.createElement("p");

//创建一个文本节点

var   t=document.createTextNode("我是文本添加的");

p.appendChild(t);

div.appendChild(p);

insertBefore,在父节点p节点的前面添加一个h3节点

var    h3=document.createElement("h3");

h3.innerHTML="我是后来的三级标题";

div.insertBefore(h3, p);

3.属性常见的操作方法

不管是设置,获取,修改属性,都是针对元素的行间属性(常用的有:class   id   title    style       target   href)

设置

a.setAttribute("title","popo");

a.setAttribute("class","haha");

a.setAttribute("style","background-color: green;")

删除

a.removeAttribute("title");

获取

console.log(a.getAttribute("href"));

div.ondblclick=function(){

console.log("ondblclick");

}

//表单提交事件onsubmit

Form.onsubmit=function(event) {

varev=event||window.event;

//如果内容是空,阻止表单提交事件

if(Txt.value=="") {

4.元字符d数字

var     str="23 12n jkj$323$ad 312 rjfks%$jf";

var      reg=/d /g;

var arr = str.match(reg);

alert(arr);

//replace将字符串里面满足正则验证的部分,用新的东西替换掉

var   str=str.replace(reg,"***") ;

alert(str);

console.log(ev);

9.中括号[ ]

[]中括号内部就是取值区间,闭区间

var    str="ssd387976atdr kf3dkl 45j jpo9hj fr00";

//var reg = /[3-9a-n]/g;

var   reg=/[02468a-n]/g;

var   arr=str.match(reg);

alert(arr);

封装一个删除cookie的函数

function    removeCookie(name) {

setCookie(name,"",-10);

}

//removeCookie("hobby");

//console.log(document.cookie);


9.滚轮事件

火狐浏览器与其他浏览器滚轮事件不一样

火狐浏览器与其他浏览器滚轮触发的方向不一样,方向是反的

console.log(ev.keyCode);

//空格32

//0~948~57

//左上右下 37,38,39,40

}

//键盘控制元素移动

//实现点上下左右键,box移动

var    box=document.getElementById("box");

document.onkeydown=function(event) {

var    ev=event||window.event;

6.事件捕获和事件冒泡

事件捕获:当你使用事件捕获时,父级元素先触发,子级元素后触发。

事件捕获阶段:事件从最上一级标签开始往下查找,直到捕获到事件目标(target)。

捕获型事件(event capturing):事件从最不精确的对象(document 对象)开始触发,然后到最精确(也可以在窗口级别捕获事件,不过必须由开发人员特别指定)

事件冒泡:当你使用事件冒泡时,子级元素先触发,父级元素后触发。

事件冒泡阶段:事件从事件目标(target)开始,往上冒泡直到页面的最上一级标签。

冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。

DOM事件流:同时支持两种事件模型:捕获型事件和冒泡型事件,但是,捕获型事件先发生。两种事件流会触及DOM中的所有对象,从document对象开始,也在document对象结束。

用法: getComputedStyle(对象, 伪类).样式名

switch(ev.keyCode) {

case37:

box.style.left=box.offsetLeft-100 "px";

break;

case38:

box.style.top=box.offsetTop-100 "px";

break;

case39:

box.style.left=box.offsetLeft 100 "px";

break;

case40:

box.style.top=box.offsetTop 100 "px";

break;

default:

alert("你个菜鸡");

break;

}

}

insertBefore(newElement, targetElement): 向targetNode之前插入 节点node

btn.onmousedown=function() {

console.log("onmousedown");

}

document.onkeydown=function(event) {

console.log("onkeydown");

var    ev=event||window.event;

移除父节点中的某一个子节点,删除:第一种方法把父节点中的某一个节点删除,第二种方法直接删除自身

div.removeChild(p);

p.remove();

通过遍历删除第一个p标签

var    childs=div.children;

for(vari=0; i<childs.length; i ) {

if(childs[i].nodeName=="P") {//这里的P一定要是大写的额,否则没有效果额

childs[i].remove();

break;

}

}

获取到第一个h3,删除h3的nextElementSibling

var newH3=div.firstElementChild;

var removeP=newH3.nextElementSibling;

removeP.remove();

本文由分分快三计划发布,转载请注明来源

关键词: 分分快三计划 日记本 JS学霸笔记 程序员之路