python全棧開發day49-jquery的位置信息、事件流、事件對象，事件委託，事件綁定和解綁

1、昨日內容回顧

　　　   1.　　jQuery的屬性操做

　　　　　　1） html屬性操做：attr

　　　　　　2） DOM屬性操做：prop

　　　　　　3） 類樣式操做：addClass、removeClass、toggleClass

　　　　　　4） 值操做：html(),text(),val()

　　　　2.　　jQuery的DOM操做

　　　　　　append appendTo  prepend prependTo  after insertAfter before insertBefore

                      remove  detach empty

　　　　　　repacleWith  replaceAll  clone

2、今日內容總結

　　　　0　　 設計模式

　　　　　　　　　　mvc  mtv mvvm

　　　　　　　　

        
                補充：
                26種設計模式 解耦
                MVC(nodejs,django)  MTV(django)  MVVM (Vue)
                                    Model-Template(視圖)-Viewdef(視圖函數（驅動）)
                                    
                                    
                                    先後端 markdown語法（本身去擴展） 16語法  標籤 ## 123
                                    
                                    前端
                                    127.0.0.1:8080/index  url
                                    --url
                                    --template
                                        --index.html
                                    
                                    後端
                                    def indeDef():
                                        //讀文件
                                        with open...
                                        
                                        
                                            response
                                        
                                        render('index.html',response)
                                        
                                        
                                        
                                    
                                    //視圖函數
                                    url('/index',indeDef)
                Model-View-Controler
                
                模型數據
                數據驅動視圖
                
                *****數據不是憑空展現到視圖，是經過控制器（概念很大）驅動着數據渲染到視圖上
                
                
                MVC
                
                
                <div>哈哈哈</div>
                
                $('div').click(function(){
                    $(this).css('color','red').text('葛大店');
                });
        

View Code

　　　　　　　　　　

　　　　1　　jQuery的位置信息

　　　　　　　　　　1）.width()  .height()

　　　　　　　　　　2)  .innerWidth()　　.innerHeight()

　　　　　　　　　　3) .offset()  --top width

　　　　　　　　　　4)  .scrollTop()　　 .scrollLeft()

　　　　　　　　　　5) .position()

 

　　　　2　　jQurey的事件流

　　　　　　　　　　1） 捕獲階段 目標階段 冒泡階段

　　　　　　　　　　　   　　document.body.addEventListener('click',fn);

　　　　　　　　　　　  　　 document.body.removeEventListener('click',fn);

　　　　　　　　　　2) 阻止表單提交

　　　　　　　　　　　　　$('form').submit(function(event){

　　　　　　　　　　　　　　　　event.preventDefault();

　　　　　　　　　　　　　　　　..........

　　　　　　　　　　　　　　})

　　　　　　　　　　3) 阻止冒泡

　　　　　　　　　　　　　event.stopPropagation()

　　　　　　　　　　4）經常使用事件

　　　　　　　　　　

 

　　　　3　　jQuery的事件對象

　　　　　　　　　1）、什麼是事件對象Event

　　　　　　　　　　　Event 對象表明事件的狀態，好比事件在其中發生的元素、鍵盤按鍵的狀態、鼠標的位置、鼠標按鈕的狀態。　

1.何時會產生Event 對象呢?
例如: 當用戶單擊某個元素的時候,咱們給這個元素註冊的事件就會觸發,該事件的本質就是一個函數,而該函數的形參接收一個event對象

2.事件一般與函數結合使用，函數不會在事件發生前被執行！

 2）、事件對象的屬性和方法

屬性	描述
altKey	返回當事件被觸發時，」ALT」 是否被按下。
button	返回當事件被觸發時，哪一個鼠標按鈕被點擊。
clientX	返回當事件被觸發時，鼠標指針的水平座標。
clientY	返回當事件被觸發時，鼠標指針的垂直座標。
ctrlKey	返回當事件被觸發時，」CTRL」 鍵是否被按下。
metaKey	返回當事件被觸發時，」meta」 鍵是否被按下。
relatedTarget	返回與事件的目標節點相關的節點。
screenX	返回當某個事件被觸發時，鼠標指針的水平座標。
screenY	返回當某個事件被觸發時，鼠標指針的垂直座標。
shiftKey	返回當事件被觸發時，」SHIFT」 鍵是否被按下

　　

• IE 屬性(除了上面的鼠標/事件屬性，IE 瀏覽器還支持下面的屬性)

屬性	描述
cancelBubble	若是事件句柄想阻止事件傳播到包容對象，必須把該屬性設爲 true。
fromElement	對於 mouseover 和 mouseout 事件，fromElement 引用移出鼠標的元素。
keyCode	對於 keypress 事件，該屬性聲明瞭被敲擊的鍵生成的 Unicode 字符碼。對於 keydown 和 keyup
offsetX,offsetY	發生事件的地點在事件源元素的座標系統中的 x 座標和 y 座標。
returnValue	若是設置了該屬性，它的值比事件句柄的返回值優先級高。把這個屬性設置爲
srcElement	對於生成事件的 Window 對象、Document 對象或 Element 對象的引用。
toElement	對於 mouseover 和 mouseout 事件，該屬性引用移入鼠標的元素。
x,y	事件發生的位置的 x 座標和 y 座標，它們相對於用CSS動態定位的最內層包容元素。

 

 

• 標準 Event 屬性 下面列出了 2 級 DOM 事件標準定義的屬性。

屬性和方法	描述
bubbles	返回布爾值，指示事件是不是起泡事件類型。
cancelable	返回布爾值，指示事件是否可擁可取消的默認動做。
currentTarget	返回其事件監聽器觸發該事件的元素。
eventPhase	返回事件傳播的當前階段。
target	返回觸發此事件的元素（事件的目標節點）。
timeStamp	返回事件生成的日期和時間。
type	返回當前 Event 對象表示的事件的名稱。
initEvent()	初始化新建立的 Event 對象的屬性。
preventDefault()	通知瀏覽器不要執行與事件關聯的默認動做。
stopPropagation()	再也不派發事件。

 

　　　　　　3）vent對象的一些兼容性寫法（瞭解）

• • • • 得到event對象兼容性寫法 
        event || (event = window.event);
      • 得到target兼容型寫法 
        event.target||event.srcElement
      • 阻止瀏覽器默認行爲兼容性寫法 
        event.preventDefault ? event.preventDefault() : (event.returnValue = false);
      • 阻止冒泡寫法 
        event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = true);

 

　　　　4　　事件委託

 　　　　　　　　1） 原理

　　　　　　　　　　利用冒泡的原理，把事件加到父級上，觸發執行效果。

　　　　　　　　 2） 做用

　　　　　　　　　　（1） 性能好

　　　　　　　　　　（2） 針對新建立的元素，直接能夠擁有事件。

　　　　　　　　 3） 跟this做用同樣（他不用看指向問題，誰操做的就是誰），event對象下的

                              4） 使用場景

　　　　　　　　　　 爲DOM中的不少元素綁定相同事件；

　　　　　　　　　　 爲DOM中尚不存在的元素綁定事件。

　　　　　　　　  5） 句法格式，看例子。　　　　　

　　　　　　　　on(type,selector,data,fn);
　　　　　　　　

參數解釋

　　　　　　events( String) : 一個或多個空格分隔的事件類型

selector( String) : 一個選擇器字符串，用於過濾出被選中的元素中能觸發事件的後代元素

data: 當一個事件被觸發時，要傳遞給事件處理函數的 event.data。

fn:回調函數

<body>
        <ul>
            <li class="luffy">路飛</li>
            <li>路飛</li>
            <li>路飛</li>
            
        </ul>
</body>
<script src="jquery-3.2.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    
    //經過on()方法
     $('ul').on('click','#namei,.luffy',function(){
        console.log(this);
       })
            
   //將來追加的元素 
    $('ul').append('<a id="namei">娜美</a>')

}
</script>

事件委託的例子

 

　　　　5 　　事件綁定和解綁

　　　　　　　　　　1） 綁定事件：

　　　　　　　　　　　

function handler(event) {
//event.data 能夠獲取bind()方法的第二個參數的數據
  alert(event.data.foo);
}
$("p").bind("click", {foo: "bar"}, handler)

中間的數據參數是可選參數。

　　　　　　　　　　2） 取消綁定：

　　　　　　　$("p").unbind() // 把全部段落的全部事件取消綁定

　　　　　　   $("p").unbind('click') //將段落的click事件取消綁定

　　　　　　　刪除綁定函數，有坑　　　　　　　　

var foo = function () {
  //綁定事件和解綁事件的事件處理函數
};

$("p").bind("click mouseenter", foo); // 給p段落綁定click mouseenter事件

$("p").unbind("click", foo); // 只解綁了p段落標籤的click事件

刪除特定函數的綁定

　　　　　　　　　　3） 自定義事件　　　　　

　　　　　　$('button').bind('myClick',function(ev,a,b){
   　　　　　　 //給button按鈕添加的自定義事件myClick事件        
　　　　　　})

　　　　　　$('button').trigger('myClick',[1,2])  
　　　　　　　　　　 4）一次性試驗　　　　　　　　　　

$("p").one("click", function(){
//只有第一次點擊的時候纔會觸發，再次點擊不會觸發了
  alert( $(this).text() );
});

　　
　　　　　　　　　　

3、預習和擴展

　　　　1.數據雙向綁定初識Vue　　　　　

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <form id='app'>
           <!-- 指令系統 -->
        <input type="text" name="" v-model='msg'>
        <!--模板語法插值-->
         <p>{{msg}}</p>
         <h1>{{msg2+'sb'}}</h1>
         <p>{{1==2?msg:msg2}}</p>


    </form>

    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
    <script >
            var app = new Vue(
            {
                el:'#app',
                data:{
                    msg:'哈哈',
                    msg2:'sbdfff',
                }

            })

    </script>


</body>
</html>

數據雙向綁定

　　　　2.實時監聽輸入框內容

　　　　

        // 實施監聽輸入框內容的輸入
            // $('.username')[0].oninput = function(e){

            //     console.log(e.target.value);
            //     $('.model').text(e.target.value);
            // };

 　　　　

 

　　　3.顯示一個簡單的時鐘：　　　

<html>
<head>
<script type="text/javascript">
function startTime()
{
var today=new Date()
var h=today.getHours()
var m=today.getMinutes()
var s=today.getSeconds()
// add a zero in front of numbers<10
m=checkTime(m)
s=checkTime(s)
document.getElementById('txt').innerHTML=h+":"+m+":"+s
t=setTimeout('startTime()',500)
}

function checkTime(i)
{
if (i<10) 
  {i="0" + i}
  return i
}
</script>
</head>

<body onload="startTime()">
<div id="txt"></div>
</body>
</html>

顯示一個簡單的時鐘

 　　  4. 去空格函數。