码迷,mamicode.com
首页 > Web开发 > 详细

jquery事件触发

时间:2021-04-06 14:22:41      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:title   html   ready   loaded   匿名   事件   span   引擎   atom   

一 事件绑定的两种方式

$(‘xx‘).click(function(){
  })
$(‘xx‘).on(‘click‘,function(){
})

二 常用事件

1.click() 点击事件

$(‘.d1‘).click(function () {
       $(this).css({‘background-color‘:‘black‘});
  });

2.focus() 聚焦事件

$(‘#username‘).focus(function () {
       $(‘.d1‘).css({‘background-color‘:‘green‘});
  });

3.blur() 失去焦点事件

$(‘#username‘).blur(function () {
      $(‘.d1‘).css({‘background-color‘:‘pink‘});
  });

4.change() 区域内容发生改变

 $(‘select‘).change(function () {
      $(‘.d1‘).toggleClass(‘cc‘);
  });

5.hover() 是对mouseenter()事件和mouseout()事件的封装

//鼠标悬浮发生的事件,有两步是对mouseenter和mouseout的封装 里边有两个匿名函数
  // $(‘.d1‘).hover(function () {
  //     $(this).css({‘background-color‘:‘blue‘});
  // },
  // function(){
  //     $(this).css({‘background-color‘:‘yellow‘});
  //
  // })

6.mouseover() 鼠标悬浮等同于hover事件

//mouseover 和 mouseenter事件的区别是 mouseover事件 如果标签有子标签,那么移入到
子标签时会连续触发, mouseenter事件不管有没有子标签只触发一次,表示鼠标进入这个对象
//鼠标进入
// $(‘.d2‘).mouseenter(function () {
  //     console.log(‘亚太应绿了‘)
  // });
?
  //鼠标悬浮
  $(‘.d2‘).mouseover(function () {
      console.log(‘绿了‘);

7. window之keydown()事件

// function函数的 e/event参数 表示的是事件 keydown/keyup keycode表示的是属性
按键值
$(window).keydown(function (e) {
       // console.log(e.keyCode);
       if (e.keyCode === 37){
           $(‘.d1‘).css({‘background-color‘:‘orange‘});
      } else if (e.keyCode === 39){
           $(‘.d1‘).css({‘background-color‘:‘green‘});
      }else {
           $(‘.d1‘).css({‘background-color‘:‘black‘});
?
      }
  });

8.window之keyup()事件

 $(window).keyup(function (e) {
       console.log(e.keyCode);
  })

9.input事件 必须用on的绑定事件

针对百度搜索引擎
//input事件监听输入内容 必须用on触发事件 propertychange 用来兼容ie浏览器的
$(‘#username‘).on(‘input propertychange‘,function(){
       console.log($(this).val());
  })

三 事件冒泡

//事件冒泡是指多个事件会一直往父级标签触发
$(‘#d1‘).click(function () {
      alert(‘父级标签‘)
  });
  // $(‘#d2‘).click(function () {
  //     alert(‘子级标签‘);
  //     //消除事件冒泡方式一
  //     return false;
  //
  // });
  $(‘#d2‘).click(function (e) {
      alert(‘自己标签‘);
      e.stopPropagation();
  })

四 事件委托 必须用on的绑定方式

//事件委托是通过事件冒泡的原理,利用父标签去捕获子标签的事件,将未来添加进来的某些子标签
自动绑定上事件
//将点击事件委托给父级了,但是$(this)还是当前的点击对象
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>事件委托</title>
</head>
<body>
<div class="c1">
   <input type="button" value="解压小按钮">
   <button class="c2">点击就送</button>
</div>
<script src="jquery-3.5.1.js"></script>
<script>
   $(‘:button‘).click(
      function () {
          alert(‘周雅婷跟我笑,哈哈哈哈哈‘);
          var a = $(this).clone(true);
          $(‘div‘).append(a);
                    }
  );
   $(‘.c1‘).on(‘click‘,‘.c2‘,function () {
       alert(‘臭屁在‘);
       var a = document.createElement(‘button‘);
       $(a).text(‘点击就送‘);
       console.log($(this)) //还是我们点击的这个对象
       $(a).addClass(‘c2‘);
       $(‘div‘).append(a);
  })
</script>
</body>
</html>

五 页面载入

方式一 DOM对象window操作

script 统一放在最下面
window.onload = function(){}
// window.onload = function () {
  //     $(‘.c1‘).click(function(){
  //         $(this).css({‘background-color‘:‘blue‘});
  //     })
  // }

方式二 jquery对象操作

1.$(document).ready(function(){})
2. $(function(){})
$(function () {
      $(‘.c1‘).click(function () {
          $(this).css({‘background-color‘:‘black‘});
      })
  })

区别

1.window.onload()函数有覆盖现象,必须等待图片资源加载完成后才能够调用
2.jquery的这个入口函数没有函数覆盖现象,文档加载完就可以使用,建议使用次函数
?

 

jquery事件触发

标签:title   html   ready   loaded   匿名   事件   span   引擎   atom   

原文地址:https://www.cnblogs.com/learn-record/p/14615685.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!