来自 澳门新葡亰 2019-09-23 11:19 的文章
当前位置: 澳门新葡亰app > 澳门新葡亰 > 正文

没有涉及事件处理,正则表达式

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title></title>    <script type="text/javascript">        //bom浏览器对象模型 window 类 和对象的关系        //bom编程:主要就是学习如何使用window对象里面的属性,方法,事件        //window.onload 页面资源加载完毕事件  html+css+js+图片+视频+音频等加载完毕执行        window.onload = function () {            //获取dom对象            document.getElementById("btnTest");            var peopleArr = [1, 2, 3, 4, 5];//加了var 就是局部变量,不加var 就是往window对象追加属性        }        //---------------分割线--------------------        //定时器--开启以后有一个返回值,叫做定时器id,可以通过这个id来停止这个定时器        var timeOurId = setTimeout(ForTimeOut, 2000, 10, "fox");        clearTimeout(timeOurId);        function ForTimeOut(age, name) {            alert;        }        //计时器--多次执行        var intervarlId = setInterval(ForTimeOut, 1000);        clearInterval(intervarlId);        //-------------分割线------------------------------        //body对象的作用域--body的本质是div 不给高度默认就一根线,根据自己内部的元素而变大        //如果需要整个页面都是作用域,那么事件应该加给window         //------------华丽分割线-------------        //------------下面是dom复习----------        //------------华丽分割线-------------        //dom文档对象模型  页面中的每一个标签元素 都是一个dom对象        //dom编程:如何使用dom对象的属性,方法,事件        //浏览器解析完页面html+css+js,从上到下创建dom对象,生成dom树  放在 window.document        //----------分割线-----------获取dom元素        var domTest = document.getElementById()//只拿一个,如果有相同id ,从上往下取,取到第一个为止        document.getElementsByClassName();//class 返回的是dom数组        document.getElementsByTagName();//标签名 标签名就是 标签的 第一个字母        //---------分割线----------修改dom元素的属性        domTest.innerHTML//修改双标签之间的文本值 直接覆盖原始值 innerText        domTest.value//单标签 通过.value修改文本值(一般是input标签)        domTest.style.任意样式//修改高度,宽度 等需要单位的 必须加上px        domTest.getAttribute()//获取自定义属性        domTest.setAttribute("littleStar", "爸爸去哪儿");        domTest.removeAttribute("littleStar");//注意,英语能力提升,学习编程会更快         //--------分割线---------创建dom元素        document.createElement.type="button";//input标签的默认形态 就是文本框        //只有上面这个方法,方法的返回值是,创建好的dom元素        domTest.cloneNode//克隆dom元素 false 只克隆元素本身 true:子元素一并克隆        //克隆元素跟之前的一模一样,id也是一样,如果又需要根据id获取元素的 必须把id改掉        document.createElement.insertRow().insertCell()//快速创建table 不常用--了解即可         //------------分割线-----------删除dom元素        domTest.parentNode.removeChild;//dom元素不能自己删除自己需要父元素把他删除        domTest.innerHTML = "";//暴力型删除,全部清空        //上面的删除,只是将dom元素从dom树里面移除,页面中看不到了,但是还在内存里面         //-----------分割线---------加入到dom树里面        domTest.appendChild//为某一个元素追加子节点,在最后追加        domTest.insertBefore(新元素, 位置元素)//在指定元素之前,插入新元素        domTest.innerHTML = "<input type='text' value='马上下课了'>";         //---------分割线----------dom事件        //在满足某些情形的时候触发方法        //winform中是以 控件对象.onclick 的方式设置        domTest.onclick = function () { }  </script></head><body style="background-color: yellow">    <input type="button" />    <input type="button" value="我是一个按钮"  foxName="smallFox" /></body></html>

DOM(Document Object Model) 即文书档案对象模型,是指向HTML和XML文书档案的二个API,DOM描绘了二个档案的次序化的节点树,允许开辟职员实行增加、移除和改换页面包车型地铁某一有的。

  

一、DOM事件的级别

  • DOM0 点击事件的JS中写法是: element.onclick=function(){ },如果在HTML中就是onclick属性上加二个JS语句。
    去除DOM0事件管理程序,只要将对应事件属性置为null就能够,即element.onclick=null
  • DOM2 新添的点击事件JS中写法是:element.addEventListener('click', function(){}, false)。最终二个参数为true的时候表示在捕获阶段调用程序,假如是false,表示在冒泡阶段调用事件管理程序。
    删除DOM2事件管理程序,用removeEventListener实现。
    IE中的DOM2级事件管理使用了attachEvent来促成,IE9以下版本只帮衬冒泡事件,所以attachEvent加上的事件都是冒泡阶段。attachEvent增进的平地风波首先个参数是onclick而非标准事件中的click。使用detachEvent福寿年高删除事件。
  • DOM3 定义情势没变,知识新扩充了广大事变类型,饱含UI事件,鼠标事件,主题事件,滚轮事件等等。如:element.addEventListener('keyup', function(){}, false)

因为DOM1注重专一于HTML文档和XML文书档案,未有提到事件管理,所以事件管理间接从DOM0跳到DOM2。

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    <title></title>    <script type="text/javascript">        window.onload = function () {            document.getElementById("button01").onclick = function () {                alert("我是通过dom元素.onclick设置的"+this);            }            alert(document.getElementById("button01").onclick);             alert(document.getElementById("button02").onclick);         }         //---------封装的方法        function sayYeah() {            alert("oh_Yeah!"+this);        }     </script>  </head><body>    <input type="button"  value="document设置"/>    <input type="button"  value="写在标签里面" onclick="sayYeah();"/></body></html>

二、DOM事件模型

DOM事件模型分为两类:一类是IE所使用的冒泡型事件(Bubbling);另一类是DOM规范定义的冒泡型与捕获型(Capture)澳门新葡亰官网APP,的平地风波。除IE外的任何浏览器都协理规范的DOM事件管理模型。

澳门新葡亰app 1

DOM事件模型

  • 冒泡型事件处理模型(Bubbling)
    如上海体育场地所示,冒泡型事件管理模型在事件时有发生时,首先在最标准的因素上接触,然后向上传播,直到根节点。反映到DOM树上正是事件从叶子节点传播到根节点。

  • 捕获型事件管理模型(Captrue)
    相反地,捕获型在事件产生时首先在最超级的要素上接触,传播到最低端的要素上。在DOM树上的显现正是由根节点传播到叶子节点。

  • 业内的DOM事件管理模型
    正式的事件管理模型分为四个阶段:
    (1) 父成分中保有的捕获型事件(假诺有)自上而下地进行
    澳门新葡亰app,(2) 指标元素的冒泡型事件(借使有)
    (3) 父成分中有所的冒泡型事件(假如有)自下而上地推行

  

三、DOM事件流

DOM规范使用捕获+冒泡。二种事件流都会触发DOM的富有指标,从document对象最先,也在document对象甘休。

澳门新葡亰app 2

DOM事件流

标准DOM事件流包含四个级次:事件捕获阶段,处于目的阶段和事件冒泡阶段

  • 事件捕获阶段:实际目的(<div>)在抓获阶段不会收下事件。也正是在破获阶段,事件从document到<html>再到<body>就止住了。上图中为1~3。
  • 高居目的阶段:事件在<div>上发出并拍卖。不过事件管理会被视作是冒泡阶段的一部分。
  • 冒泡阶段:事件又无翼而飞回文档。
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title></title>    <script type="text/javascript">        //事件参数的由来        //点击某个dom元素的时候.浏览器知道,浏览器就去检查是否有点击事件        //如果有点击事件 就调用  dom.onclick; 同时传入事件参数        //事件参数的作用,阻断冒泡,获取鼠标位置,按键信息等         //常用属性        //offsetX Y 是鼠标在当前这个控件偏离原点的坐标         //窗体加载事件           window.onload = function () {            document.getElementById("btnTestEvent").onclick = function  {                //offset 是鼠标在当前这个dom元素的内部的坐标 ,左上角是原点                alert(event.offsetX + "||" + event.offsetY);            }        }        window.onmousemove = function  {            // alert(evt.offsetX + "|" + evt.offsetY);            //设置按钮的value值            document.getElementById("showInfo").value = evt.x + "|" + evt.y;            document.getElementById("happyTwo").style.top = evt.y + "px";            document.getElementById("happyTwo").style.left = evt.x + "px";            //document.getElementById.style.top = evt.x + "px";            //document.getElementById.style.left = evt.y + "px";        }    </script></head><body>    <label  style="position: absolute;">快乐的小二逼</label>    <input type="text"  />    <input type="button" value="测试事件参数"  />            <img src="img/q.bmp"  />    </body></html>

四、DOM事件捕获的切切实实流程

澳门新葡亰app 3

DOM事件捕获具体流程

第一接受的是window,然后是ducument,再是html标签(js获取html节点用document.documentElement),然后是body,最后随着节点父亲和儿子关系顶级一流往下传,直到目的成分。
冒泡则相反,从指标成分到window一级一流往上。
经过代码来说述事件捕获过程:

<div id="ev"  style='width:100px;height: 100px;background: blue'></div>
// 把打印顺序搅乱,以免误以为是因为执行顺序影响
<script>
        var ev = document.getElementById('ev');

        ev.addEventListener('click', function (e) {
            console.log('ev captrue');
        }, true);

        window.addEventListener('click', function (e) {
            console.log('window captrue');
        }, true);

        document.addEventListener('click', function (e) {
            console.log('document captrue');
        }, true);

        document.body.addEventListener('click', function (e) {
            console.log('body captrue');
        }, true);

        document.documentElement.addEventListener('click', function (e) {
            console.log('html captrue');
        }, true);

        // 打印结果如下:
       // window captrue
       // document captrue
      // html captrue
      // body captrue
      // ev captrue

</script>

经过代码来描述事件冒泡过程:

<div id="ev"  style='width:100px;height: 100px;background: blue'></div>
// 把打印顺序搅乱,以免误以为是因为执行顺序影响
<script>
        var ev = document.getElementById('ev');

        ev.addEventListener('click', function (e) {
            console.log('ev captrue');
        }, false);

        window.addEventListener('click', function (e) {
            console.log('window captrue');
        }, false);

        document.addEventListener('click', function (e) {
            console.log('document captrue');
        }, false);

        document.body.addEventListener('click', function (e) {
            console.log('body captrue');
        }, false);

        document.documentElement.addEventListener('click', function (e) {
            console.log('html captrue');
        }, false);

        // 打印结果如下:
        // ev captrue
        // body captrue
        // html captrue
        // document captrue
       // window captrue
</script>

事件冒泡

五、Event对象的常见应用

  • event.preventDefault():阻止暗许行为。常用的景况纵然给二个<a>标签绑定了click事件,响应函数中安装了 event.preventDefault(),就拦截了链接跳转的行为。
  • event.stopPropagation():阻止冒泡行为。比方:贰个父级成分绑定了三个平地风波,子成分绑定了另三个事件,假设想父级成分做一件事,子成分做一件事,两件事是分开的,互不影响,就供给给子成分事件中安装event.stopPropagation(),不然子成分事件试行时,依照冒泡的规格,父级成分事件也会响应。
  • event.stopImmediatePropagation:除了该事件的冒泡行为被截留之外(event.stopPropagation主意的功效),该因素绑定的后序同样档案的次序事件的监听函数的施行也将被拦住。如八个成分上绑定了2个click事件a和b,要是给a函数中增多event.stopImmediatePropagation后,则阻止click事件冒泡,而且阻止了b函数的执行。
  • event.currentTarget:当事件遍历DOM时,标记事件的眼下目的(类似于this)。如下例子:
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <script>
        var ps = document.getElementsByTagName('p');
        for (var i = 0; i < ps.length; i++) {
            ps[i].addEventListener('click', func, false);
        }

        function func(e) {
            console.log(e.currentTarget);  // 打印所点击对应的<p>节点
            // 该函数用作事件处理器时: this === e.currentTarget
        }
    </script>
  • event.target:表示三个触及事件的靶子的援引,常用来促成事件委托。如:
<ul id="ul">
   <li>1</li>
   <li>2</li>
   <li>3</li>
</ul>

    <script>
        document.getElementById("ul").addEventListener('click', function(){
              console.log(event.target);   // 当点击1时,打印<li>1</li>
              console.log(event.currentTarget);  // 当点击1或2或3时,都打印整个<ul>
        });
    </script>
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title></title>    <style type="text/css">        div {            border: 1px solid #0094ff;            width: 80%;            margin: 0 auto;        }         #div01Pao {            height: 500px;            background-color: #00ffe0;        }         #div02Pao {            height: 80%;            background-color: #f500ff;        }    </style>    <script type="text/javascript">        //0级dom事件冒泡,触发了某个子元素的某个事件后,同时会依次逐级触发父元素的同名事件`        //事件参数里面的 evt.stopPropagation();这个方法 只要在事件中执行,就能够阻断冒泡        window.onload = function () {            //分别为 div01 div02 按钮添加点击事件            document.getElementById("div01Pao").onclick = function  {                alert(this.id + "点击事件被触发");            }            document.getElementById("div02Pao").onclick = function  {                alert(this.id + "点击事件被触发");            }            document.getElementById.onclick = function  {                evt.stopPropagation();                alert(this.id + "点击事件被触发");            }             //为body添加点击事件            document.body.onclick = function  {                alert("body的onclick事件被触发");            }        }     </script></head> <body>    <div >        我是div01Pao        <div >            我是div02Pao            <input type="button"  value="btnPao" />        </div>    </div></body></html>

六、自定义事件

以上所讲都以DOM一些自带的事件,当然也得以友善定义一些风浪。

  • ① 自定义一个事件:new Event()
  • ② 给贰个dom节点绑定自定义的风云
  • ③ 使用dispatchEvent() 分派事件
<div id="ev"></div>

<script>
var ev = document.getElementById('ev');
var evt = new Event('test');
ev.addEventListener('test', function () {
    console.log('test dispatch');
});
setTimeout(function () {
    ev.dispatchEvent(evt);
}, 3000);

// 打开页面3面后打印 'test dispatch'
</script>

二级DOM事件

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title></title>    <script type="text/javascript">        window.onload = function () {            document.getElementById("btnTest").onclick = function  {                alert;                alert;            }            document.getElementById("btnTest").onclick = function  {                alert;            }            //0级dom事件后注册的会覆盖先注册的-            //-----------分割线-------------演示二级dom事件            //二级dom事件 增加 使用 dom元素.addEventListener;            //二级dom事件可以多次增加,不会覆盖,执行的顺序,是注册的顺序            //二级跟0级可以共存,执行的顺序是注册的顺序            //二级dom事件移除 使用removeEventListener("事件类型",方法地址)//这里使用匿名函数,就无法移除            document.getElementById.onclick = function  { alert("0级dom事件被触发"); }            document.getElementById.addEventListener("click", sayTwo);            document.getElementById.addEventListener("click", function  { alert("第二次注册二级dom事件"); });            document.getElementById.removeEventListener("click", sayTwo);        }         //-------------封装的方法        function sayTwo {            alert("二级dom事件");        }    </script></head><body>    <input type="button"  value="0级dom事件" />    <input type="button"  value="二级dom事件" /></body></html>

二级DOM事件冒泡

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title></title>    <style type="text/css">        div {            border: 1px solid #0094ff;            width: 80%;            margin: 0 auto;        }         #div01Pao {            height: 500px;            background-color: #00ffe0;        }         #div02Pao {            height: 80%;            background-color: #f500ff;        }    </style>    <script type="text/javascript">        window.onload = function () {            //二级dom事件也会冒泡            //二级dom事件注册的时候 第三个参数如果传了true 那么事件就不在冒泡,而是捕获            //捕获,是从外往里执行,如果元素有事件,那么就执行,如果没有,就不执行            //如果第三个参数给的是 false  那么就是冒泡            //先执行捕获阶段的事件,再执行冒泡阶段的事件            //如果不写第三个参数,默认是false            document.getElementById.addEventListener("click", function  { alert(this.id + "二级事件被触发"); }, true);            document.getElementById("div02Pao").addEventListener("click", function  { alert(this.id + "二级事件被触发"); }, false);            document.getElementById("div01Pao").addEventListener("click", function  { alert(this.id + "二级事件被触发"); }, true);        }      </script></head> <body>    <div >        我是div01Pao        <div >            我是div02Pao            <input type="button"  value="btnPao" />        </div>    </div></body></html>

阻断暗中认可行为

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title></title>    <script type="text/javascript">        //事件参数里面 有一个方法preventDefault() 可以用来阻断默认行为,--一半用在 a标签 或者是 提交按钮        window.onload = function () {            document.getElementById.onclick = function  {                alert;                //使用事件参数的阻断默认行为                evt.preventDefault();            }            //document.getElementById.onclick = function  {            //    evt.preventDefault();            //}            //表单元素的 onsubmit事件,会在 点击表单中 的submit按钮时触发            document.getElementById("formUser").onsubmit = function  {                alert("表单即将被提交,要不要再次验证数据的合理性呢?");            }            alert;            //直接调用表单元素的 submit()方法 不会触发 onsubmit事件            document.getElementById("formUser").submit();        }      </script></head><body>    <a href="p040级事件冒泡.html" >去看冒泡</a>    <form action="p08接受get请求.html" method="post" >        <label>用户名:</label>        <input type="text" name="userName" /><br />        <label>密码:</label>        <input type="password" name="userPass" /><br />        <label>性别:</label><input type="radio" name="userSex"  value="man" /><label for="man">男</label><input type="radio" name="userSex"  value="woman" /><label for="woman">女</label>        <br />        <input type="submit"  />    </form></body></html>

正则说明式

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title></title>    <script type="text/javascript">        //定义正则的标准        var reg = //;//使用 / 这里写正则标准/        var mailStr = "橡胶果实@qq.com";//字符串        alert(reg.test;//调用 标准的.text 会返回true 或者false 分别对应,匹配,不匹配    </script></head><body></body></html>

  

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    <title></title>    <script type="text/javascript">        window.onload = function () {            document.getElementById("btnTest").onclick = function  {                //修改自己的class                //通过className来修改元素的 class属性                this.className = "itcast";            }        }     </script></head><body>    <input type="button"  value="我是按钮"  /></body></html>

  

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title></title>    <script type="text/javascript">        window.onbeforeunload = function () {            alert("你确定要离开我了");        }        window.onload = function () {            document.getElementById("btnShow").onclick = function  {                window.showModelessDialog("p020级dom事件.html");            }        }     </script></head><body>    <input type="button" name="button" value="显示模态窗口"  /></body></html>

  

本文由澳门新葡亰app发布于澳门新葡亰,转载请注明出处:没有涉及事件处理,正则表达式

关键词: