【html、CSS、javascript-7】Dom

時間 2019-12-09

標籤 html css javascript dom 欄目 HTML 简体版

原文原文鏈接

文檔對象模型（Document Object Model，DOM）是一種用於HTML和XML文檔的編程接口。它給文檔提供了一種結構化的表示方法，能夠改變文檔的內容和呈現方式。咱們最爲關心的是，DOM把網頁和腳本以及其餘的編程語言聯繫了起來。DOM屬於瀏覽器，而不是JavaScript語言規範裏的規定的核心內容。javascript

1、查找元素html

一、直接查找java

document.getElementById             根據ID獲取一個標籤
document.getElementsByName          根據name屬性獲取標籤集合
document.getElementsByClassName     根據class屬性獲取標籤集合
document.getElementsByTagName       根據標籤名獲取標籤集合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <html>
        <div id="i1"></div>
        <div name="n1"></div>
        <div class="c1"></div>
    </html>
    <script>
        d1 = document.getElementById("i1")  //返回單個元素，由於id不能重複
        d2 = document.getElementsByName('n1')  //返回數組
        d3 = document.getElementsByClassName('c1')   //返回數組
        d4 = document.getElementsByTagName('div')    //返回數組
    </script>
</body>
</html>

查找元素

二、間接查找node

填充顏色的 Node是可帶文本信息的，能夠經過 d1.noteType的值來判斷是文本仍是標籤，值爲1爲標籤，3表示文本編程

parentNode // 父節點 childNodes // 全部子節點 firstChild // 第一個子節點 lastChild // 最後一個子節點 nextSibling // 下一個兄弟節點 previousSibling // 上一個兄弟節點
 
parentElement           // 父節點標籤元素
children                // 全部子標籤
firstElementChild       // 第一個子標籤元素
lastElementChild        // 最後一個子標籤元素
nextElementtSibling     // 下一個兄弟標籤元素
previousElementSibling  // 上一個兄弟標籤元素

2、操做數組

一、內容瀏覽器

innerText   文本
outerText
innerHTML   HTML內容
innerHTML  
value       值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <html>
        <a href="https://www.baidu.com">
            百度<span>66666</span>
        </a>
    </html>
    <script>
        var obj = document.getElementsByTagName('a')[0]
        alert(obj.innerText)  //百度66666
        alert(obj.innerHTML)  //<span>66666</span>
    </script>
</body>
</html>

實例

value通常來取表單中的標籤的值，或者給表單中的標籤賦值app

<input type="text">
<input type="password">
<textarea>123</textarea>   
以上三種標籤都是能夠經過vaue來取值和賦值的，直接改變文本框中的內容

<input type="checkbox" value="籃球">
<input type="radio" value="是否">   多個radio，name相同時是互斥的
以上value表示選中的值是什麼，可是經過checked=true來選中的

<select><option value='01'>北京</option></select>
上面的value是當前選中的是哪一個北京-->01，能夠經過script代碼，找到select對象，obj.value = '01'來選中
select是經過標籤屬性selected = selected來默認選擇的
在script代碼中，找到select對象，設置obj.selectIndex = 0 ,則選中第一個

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <html>
        <input id="i1" type="text">
        <select id="se1">
            <option value="bj">北京</option>
            <option value="sh">上海</option>
        </select>
    </html>
    <script>
        var obj1 = document.getElementById('i1')
        var v1 = obj1.value  //當期text文本中的值
        obj1.value = "你好"  //給文本框賦值爲：你好
        var obj2 = document.getElementById('se1')
        obj2.value = "sh"  //將選擇框的默認值選擇爲:sh
    </script>
</body>
</html>

value實例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <input  type="button" value="全選" onclick="CheckAll();">
        <input type="button" value="取消" onclick="CancelAll();">
        <input type="button" value="反選" onclick="Reverse();">
    </div>
    <table>
        <thead>
            <th>選擇</th>
            <th>姓名</th>
            <th>年齡</th>
        </thead>
        <tbody>
            <tr>
                <td ><input class="c" type="checkbox" value="1"></td>
                <td>張三</td>
                <td>男</td>
            </tr>
            <tr>
                <td ><input class="c" type="checkbox" value="1"></td>
                <td>李四</td>
                <td>男</td>
            </tr>
            <tr >
                <td ><input class="c" type="checkbox" value="1"></td>
                <td>王五</td>
                <td>女</td>
            </tr>
            <tr>
                <td ><input class="c" type="checkbox" value="1"></td>
                <td>張三</td>
                <td>男</td>
            </tr>
        </tbody>
    </table>

    <script>
        function CheckAll() {
            che = document.getElementsByClassName('c')
            for(var i=0;i<che.length;i++){
                che[i].checked = true
            }
        }
        function CancelAll() {
            che = document.getElementsByClassName('c')
            for(var i=0;i<che.length;i++){
                che[i].checked = false
            }
        }
        function Reverse() {
            che = document.getElementsByClassName('c')
            for(var i=0;i<che.length;i++){
                var isChe = che[i].checked
                if(isChe){
                    che[i].checked = false
                } else{
                    che[i].checked = true
                }
            }
        }
    </script>
</body>
</html>

複選框的全選、取消、反選實現

二、屬性dom

attributes                // 獲取全部標籤屬性
setAttribute(key,value)   // 設置標籤屬性
getAttribute(key)         // 獲取指定標籤屬性
removeAttribute()      //刪除屬性

 
/*
var atr = document.createAttribute("class");
atr.nodeValue="democlass";
document.getElementById('n1').setAttributeNode(atr);
*/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="button" value="點擊改變" onclick="Click();">
    <div class="c">111</div>
    <div class="c" defContent="1">111</div>
    <div class="c">111</div>
    <div class="c" defContent="1">111</div>
    <div class="c">111</div>
    <div class="c" defContent="1">111</div>
    <div class="c">111</div>
    <script>
        function Click() {
            var get_obj = document.getElementsByTagName('div')
            for(var i=0;i<get_obj.length;i++){
                if(get_obj[i].getAttribute("defContent")=="1"){
                    console.log(get_obj[i].innerText)
                    get_obj[i].innerText = 888
                }
            }
        }
    </script>
</body>
</html>

自定義屬性修改內容

三、class操做編程語言

        obj.className   //obj表示元素對象，獲取全部樣式名稱，返回字符串
        li = obj.classList   //獲取全部樣式，而且返回列表
        li.add('className1')  //添加class='className1'的樣式
        li.remove('className1')  //刪除class='className1'的樣式

例子：模態對話框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .i2{
            position: fixed;
            top:0;
            right:0;
            bottom:0;
            left:0;
            background-color: rgba(0,0,0,0.6);
        }
        .i3{
            position: fixed;
            top:50%;
            left:50%;

            width:400px;
            height:300px;
            background-color: white;

            margin-top:-150px;
            margin-left:-200px;

        }
    </style>
</head>
<body>
    <html>
        <div>
            <p><input  type="button" value="點我彈出模態對話框" onclick="Hide();"></p>
        </div>
        <div id="i2" class="i2 hide">

        </div>
        <div id="i3" class="i3 hide">
            <p>用戶名：<input type="text"></p>
            <p>密碼：<input type="password"></p>
            <p><input type="button" value="肯定"> <input type="button" value="取消" onclick="Show();"></p>
        </div>
    </html>
    <script>
        function Hide() {
            document.getElementById('i2').classList.remove('hide')
            document.getElementById('i3').classList.remove('hide')
        }
        function Show() {
            document.getElementById('i2').classList.add('hide')
            document.getElementById('i3').classList.add('hide')
        }
    </script>
</body>
</html>

模態對話框

dom之特殊this，是將this參數所在的標籤做爲參數，傳給script函數的參數

<body>
    <div id="i1" onclick="Func(this)">點我試試</div>
    <script>
        function Func(arg) {
            console.log(arg.innerText)  //輸出點我試試
        }
    </script>
</body>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .menu{
            border:2px solid darkslategray;
            background-color: #c0cddf;
            width:200px;
            height: 800px;
        }
        .head{
            background-color: brown;
        }
        .content ul{
            margin:0;
            padding:2px;
        }
    </style>
</head>
<body>
    <div class="menu">
        <div class="item">
            <div class="head" onclick="Hide(this)">菜單1</div>
            <div class="content hide">
                <ul>
                    <li>內容1</li>
                    <li>內容1</li>
                    <li>內容1</li>
                    <li>內容1</li>
                    <li>內容1</li>
                </ul>
            </div>
        </div>
        <div class="item">
            <div class="head" onclick="Hide(this)">菜單2</div>
            <div class="content hide">
                <ul>
                    <li>內容1</li>
                    <li>內容1</li>
                    <li>內容1</li>
                    <li>內容1</li>
                    <li>內容1</li>
                </ul>
            </div>
        </div>
        <div class="item">
            <div class="head" onclick="Hide(this)">菜單3</div>
            <div class="content hide">
                <ul>
                    <li>內容1</li>
                    <li>內容1</li>
                    <li>內容1</li>
                    <li>內容1</li>
                    <li>內容1</li>
                </ul>
            </div>
        </div>
        <div class="item">
            <div class="head" onclick="Hide(this)">菜單4</div>
            <div class="content hide">
                <ul>
                    <li>內容1</li>
                    <li>內容1</li>
                    <li>內容1</li>
                    <li>內容1</li>
                    <li>內容1</li>
                </ul>
            </div>
        </div>
    </div>
    <script>
        function Hide(arg) {
            item_el = arg.parentElement
            menu_el = item_el.parentElement
            items_el = menu_el.children
            for (var i=0;i<items_el.length;i++){
                li = items_el[i].lastElementChild.classList
                if(li.contains('hide')){
                }
                else{
                    li.add('hide')
                }
                items_el[i].lastElementChild.classList.add('hide')
            }
            console.log(arg.nextSibling)
        }
    </script>
</body>
</html>

菜單摺疊是列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .b{
            color: black;
        }
        .g{
            color: gray;
        }
    </style>
</head>
<body>
    <form>
        <input  type="text" placeholder="請輸入內容">
        <input class="g" type="text" value="請輸入內容" onfocus="Focus(this);" onblur="Blur(this);">
        <script>
            function Focus(th) {
                if (th.value == "請輸入內容") {
                    th.value = ""
                    th.className = "b"
                }
            }
            function Blur(th) {
                if (th.value.trim()=="") {
                    th.value = "請輸入內容"
                }
                if (th.value.trim()=="請輸入內容"){
                    th.className="g"
                }
            }
        </script>
    </form>
</body>
</html>

文本框提示佔位符placeholder模仿

下圖Tab菜單實現：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*用after將父類的div撐開*/
        .clearer:after{
            content: '1';
            display: block;
            height: 0;
            visibility: hidden;
            clear: both;
        }
        .menu{
            background-color:#EBEBED ;
            border: 1px solid #D4D4D3 ;
            width:700px;
            margin: auto;
            z-index: 1;
        }
        .menu ul{
            margin: 0;
            padding: 0;
            z-index: 2;
        }
       .menu li{
            list-style:none;
            float: left;
           padding: 5px 20px 5px 20px;
           border-right:1px solid #D4D4D3;
           cursor: pointer;
        }
        .con{
            width:700px;
            min-height: 150px;  /*最小150，超過150自動撐大*/
            margin: auto;
            border:1px solid #D4D4D3 ;
        }
        .changeColor{
            color: red;
            background-color:white;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
    <div class="menu clearer">
        <ul>
            <li target="a1" onclick="Swich(this);">價格趨勢</li>
            <li target="a2" onclick="Swich(this);">市場分析</li>
            <li target="a3" onclick="Swich(this);">其餘</li>
        </ul>
    </div>
    <div class="con">
        <div con="a1">價格趨勢</div>
        <div con="a2">市場分析</div>
        <div con="a3">其餘</div>
    </div>
    <script>
        function Swich(ths) {
            //點擊按鈕後，顏色變爲紅色
            lis = ths.parentElement.children  //父級元素的全部子元素，實際就是操做元素的兄弟元素
            for(var i = 0;i < lis.length; i++){
                lis[i].classList.remove('changeColor')
            }
            ths.className='changeColor'

            //點擊按鈕後，顯示對應的內容其餘隱藏
            div1 = document.getElementsByClassName('con')[0]
            divs = div1.children
            for(var j=0;j<divs.length;j++){
                li_value = ths.getAttribute('target')  //單擊的li標籤target的屬性值
                for(var j=0;j<divs.length;j++)
                {
                    if(divs[j].getAttribute('con')==li_value){
                        divs[j].classList.remove('hide')
                    }else{
                        divs[j].classList.add('hide')
                    }
                }
            }
        }
    </script>
</body>
</html>

tab菜單實例

效果如圖：

四、標籤操做

a.建立標籤

// 方式一
var tag = document.createElement('a')
tag.innerText = "wupeiqi"
tag.className = "c1"
tag.href = "http://www.cnblogs.com/wupeiqi"
 
// 方式二
var tag = "<a class='c1' href='http://www.cnblogs.com/wupeiqi'>wupeiqi</a>"

b.操做標籤

// 方式一
var str = "<input type='text' />";
xxx.insertAdjacentHTML("beforeEnd",str);  xxx表示標籤對象，str表示添加的標籤字符串
xxx.insertAdjacentElement('afterBegin',document.createElement('p'))
 
//注意：第一個參數只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'

語法：
oElement = object . insertAdjacentElement ( "sWhere" , oElement )
參數：
oElement :　必選項。對象(Element)。要插入到 object 鄰近的對象。
sWhere :　必選項。字符串(String)。beforeBegin | afterBegin | beforeEnd | afterEnd
beforeBegin :　將 oElement 插到 object 的開始標籤以前。
afterBegin :　將 oElement 插到 object 的開始標籤以後。可是在 object 的全部原有內容以前。
beforeEnd :　將 oElement 插到 object 的結束標籤以前。可是在 object 的全部原有內容以後。
afterEnd :　將 oElement 插到 object 的結束標籤以後

 
// 方式二
var tag = document.createElement('a')
xxx.appendChild(tag)
xxx.insertBefore(tag,xxx[1])

字符串的方式操做實例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <input id="t1" type="text">
        <input type="button" value="單擊添加" onclick="AddData();">
    </div>
    <div>
        <ul id="i1">
            <li>11111</li>
            <li>22222</li>
        </ul>
    </div>
    <script>
        function AddData() {
            var ul_obj = document.getElementById('i1')
            var text_obj = document.getElementById('t1')
            s0 = "<li>" + text_obj.value + "</li>"
            ul_obj.insertAdjacentHTML('beforeEnd',s0)
        }
    </script>
</body>
</html>

ul標籤中動態添加li標籤內容

對象的方式添加標籤實例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <input id="t1" type="text">
        <input type="button" value="單擊添加" onclick="AddData();">
    </div>
    <div>
        <ul id="i1">
            <li>11111</li>
            <li>22222</li>
        </ul>
    </div>
    <script>
        function AddData() {
            var inp = document.getElementById('t1')
            var new_ul = document.getElementById('i1')
            var inp_value = inp.value
            var new_li = document.createElement('li')  //建立li標籤
            new_li.innerText = inp_value   //爲li標籤添加內容
            new_ul.appendChild(new_li)  //將li標籤添加至ul標籤中
        }
    </script>
</body>
</html>

對象方式動態添加li至ul標籤

標籤的移動和複製

<body>
    <h id="h">標題</h>
    <div id="diva">
        <div id="diva1">div1</div>
        <div id="diva2">div2</div>
    </div>
    <script>
        //下面將原有的h1添加到diva中，實際是移動
//        var h1 = document.getElementById('h')
//        var diva = document.getElementById('diva')
//        diva.appendChild(h1)
        
        //下面是複製一個新的h1並添加到diva中，實際是複製
        var h1 = document.getElementById('h')
        var diva = document.getElementById('diva')
        var new_h1 = h1.cloneNode(true)  //true表示即克隆標籤又克隆內容，若是不加true只是克隆標籤
        diva.appendChild(new_h1)
    </script>
</body>

五、樣式操做

var obj = document.getElementById('i1')
 
obj.style.fontSize = "32px";
obj.style.backgroundColor = "red";

六、位置操做

總文檔高度
document.documentElement.offsetHeight
  
當前文檔佔屏幕高度
document.documentElement.clientHeight
  
自身高度
tag.offsetHeight
  
距離上級定位高度
tag.offsetTop
  
父定位標籤
tag.offsetParent
  
滾動高度
tag.scrollTop
 
/*
    clientHeight -> 可見區域：height + padding
    clientTop    -> border高度
    offsetHeight -> 可見區域：height + padding + border
    offsetTop    -> 上級定位標籤的高度（若是全部父級標籤沒有出現position:當前標籤距離文檔頂端的高度；
                                     若是父級標籤出現positon:當前標籤距離position標籤的距離不含邊框）
    scrollHeight -> 全文高：height + padding
    scrollTop    -> 滾動高度
    特別的：
        document.documentElement代指文檔根節點

obj.offsetParent 是找到obj父級中有position的標籤，若是父級中都沒有position，則返回body標籤

實例：頁面跳轉到頂部，若是滾動大於固定像素則跳轉頂部隱藏不然顯示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            position: fixed;
            right:20px;
            bottom: 20px;
            height: 40px;
            width: 40px;
            background-color: #c0cddf;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body onscroll="Hide();">
    <div style="height: 2000px"></div>
    <div class="c1 hide" id="i1">
        <!--當href爲#或javascript:void(0);時表示什麼都不作,建議使用javascript:void(0);，
        由於#會加地址欄而且會跳轉一下-->
        <a  href="javascript:void(0)" onclick="GoTop();">返回頂部</a>
    </div>
    <script>
        function GoTop() {
            console.log(1111)
            //document.body.scrollTop=0;  //根據瀏覽器不一樣選擇不一樣的版本
            document.body.scrollTop=0
            document.documentElement.scrollTop=0;
        }
        function Hide() {
            var top =document.body.scrollTop+document.documentElement.scrollTop
            var div_obj = document.getElementById('i1')
            if(top >= 100){
                div_obj.classList.remove('hide')
            }else{
                div_obj.classList.add('hide')
            }
        }
    </script>
</body>
</html>

跳轉頂部實例

注意：滾輪高度+可見窗口高度（document.documentElement.clientHeight）=文檔內容高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
        }
        .pg-head{
            height: 48px;
            background-color: black;
        }
        body{
            background-color: #dddddd;
        }
        .body-left{
            background-color: red;
            position: absolute;
            left:200px;
            width:200px;
        }
        .body-right{
            background-color: green;
            position: absolute;
            left:405px;
            right:200px;
        }
        .chapte{
            height: 400px;
        }
        .fixed{
            position: fixed;
            top: 2px;
        }
        .pitchOn{
            background-color: darkslateblue;
            color: white;
        }
    </style>
</head>
<body onscroll="Wheel()">
    <div class="pg-head"></div>
    <div class="pg-body">
        <div  class="body-left" id="body-left">
            <ul id="menu_ul">
                <li>第1章</li>
                <li>第2章</li>
                <li>第3章</li>
                <li>第4章</li>
            </ul>
        </div>
        <div id="body-right" class="body-right">
            <div class="chapte">第一章</div>
            <div class="chapte">第二章</div>
            <div class="chapte">第三章</div>
            <div class="chapte">第四章</div>
        </div>
    </div>
    <script>
        function Wheel() {
            var body_obj = document.body
            var top = document.body.scrollTop+document.documentElement.scrollTop;
            left_obj = document.getElementById('body-left')
            if(top > 48){
                left_obj.classList.add('fixed')
            }else{
                left_obj.classList.remove('fixed')
            }

            var body_right_obj = document.getElementById('body-right');
            var body_rights = body_right_obj.children;
            var menu_ul_obj = document.getElementById('menu_ul');
            var menu_lis_obj = menu_ul_obj.children;
            for(var i=0;i<body_rights.length;i++){
                myScrollTop = body_rights[i].offsetTop + 48;
                if(top > myScrollTop) {
                    for(var j=0;j<menu_lis_obj.length;j++){
                        menu_lis_obj[j].classList.remove('pitchOn');
                    }
                    menu_lis_obj[i].classList.add('pitchOn');
                }
            }
        }
    </script>
</body>
</html>

滾動至章節高亮顯示

七、提交表單

document.geElementById('form').submit()

能夠賦予button或div提交功能

八、其餘操做

console.log                 輸出框
alert                       彈出框
confirm                     確認框
  
// URL和刷新
location.href               獲取URL
location.href = "url"       重定向
location.reload()           從新加載
  
// 定時器
setInterval                 屢次定時器
clearInterval               清除屢次定時器
setTimeout                  單次定時器
clearTimeout                清除單次定時器

s = setInterval(func,1000) //表示每1秒執行一次func函數

clearInterval(s) //取消定時器

s2 = setTimeout(func,5000) //表示5秒後執行一次func函數

clearTimeout(s2) //表示在5秒以內還沒執行func函數，取消定時器

做用域補充：

1） javascript中只存在函數做用域

2）綁定事件的兩種方法：

<body>
    <input type="button" id="btn" onclick="Func();">
    <script>
        function Func() {}  //第1種綁定方法
        document.getElementById('btn').onclick=function () {}  //第2中綁定方法
    </script>
</body>

3)事件觸發都是先加載到內存進行綁定，當觸發事件時才執行，下面例子三個按鈕結果均返回 3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="btn">
        <input type="button" value="按鈕1">
        <input type="button" value="按鈕2">
        <input type="button" value="按鈕3">
    </div>
    <script>
        btns = document.getElementById('btn').children
        for(var i=0;i<btns.length;i++){
            current_btn = btns[i]
            current_btn.onclick = function () {
                alert(i)
            }
        }
    </script>
</body>
</html>

做用域事件

3、事件

1）註冊事件的兩種方法

<body>
    <input type="button" id="btn" onclick="Func();">
    <script>
        function Func() {}  //第1種綁定方法
        document.getElementById('btn').onclick=function () {}  //第2中綁定方法
    </script>
</body>

2）this事件綁定函數的參數

在函數中是指代觸發事件的標籤對象

3）event

<body>
    <input type="text" onkeydown="KeyDown(event);">
    <script>
        function KeyDown(eve) {
            console.log(eve.keyCode)  //event接收event內容對象，而後用keyCode輸出按下鍵盤的ascii碼
        }
    </script>
</body>

應用場景：按住shif鍵勾選多個複選框，用判斷是否是按住shift鍵盤

設置一個全局變量，判斷是否按住了shift鍵盤，若是按照了給全局變量賦值爲true,不然賦值爲false

4)自定義事件和默認事件

a標籤和submit都有系統默認的事件

首先，若是默認事件和自定義事件並存時，先執行自定義事件

<body>
    <a id="click" href="https://www.baidu.com" onclick="Func();">百度</a>
    <script>
        function Func() {
            a_obj = document.getElementById('click')
            alert('自定義事件已運行')
        }
    </script>
</body>

以上代碼首先彈出：自定義事件已運行，而後跳轉到百度頁面，說明先執行自定義事件

<body>
    <a id="click" href="https://www.baidu.com" onclick="return Func();">百度</a>
    <script>
        function Func() {
            a_obj = document.getElementById('click')
            alert('自定義事件已運行')
            return false
        }
    </script>
</body>

以上代碼在onclick的函數裏面加上return，而且在觸發的函數中加上 return false,當返回false時再也不執行其餘事件；

若是return true則繼續執行其餘事件

應用場景：

輸入用戶名，密碼後進行登陸，若是有一項填寫錯誤則submit按鈕不執行事件，不然直接調用submit