JS中的常用事件

什么叫做事件

所谓的事件，是浏览器监听用户行为的一种机制。
比如，当用户使用鼠标 “点击” 一个按钮，会触发该按钮的“点击”事件 如果此时我们想要执行代码 就可以通过JS脚本设置“点击”事件
同样的，如果用户鼠标双击一个按钮，会触发该按钮的双击事件
类似的事件还有很多

事件的分类

鼠标事件click 点击事件dblclick 双击事件mousedown 鼠标按下事件mouseup 鼠标抬起事件(一次click包含一次mousedown和一次mouseup)mouseover 鼠标进入事件mouseenter 鼠标进入事件mouseout 鼠标离开事件mouseleave 鼠标离开事件mousemove 鼠标移动事件
键盘事件keydown 键盘键被按下keyup   键盘键被松开keypress 输入
浏览器的事件load 页面中所有资源都被加载完毕的时候scroll 页面的卷动
焦点事件focus 当一个元素获取到焦点时blur 当一个元素失去焦点时
移动端事件touchstart  触摸开始事件 会在手指按下的时候触发touchmove   触摸并移动  会在手指按下并移动的时候触发touchend    触摸结束事件  会在手指离开的时候触发
其它事件animationstart  动画开始时触发 animationend    动画结束时触发transitionend   过渡结束时触发

绑定事件

绑定事件的第一步 获取元素

    // HTML代码<button id="btn">点我试试看</button>// JS代码function click() {console.log("你好");}btn.onclick = click;

函数中的this

this是函数中的一个对象 只能够通过点语法和方括号语法修改或者访问 不能够通过 = 修改 因为它直接指向内存
特点：在函数定义的时候，无法确定指向只有在函数调用的时候，才可以确定指向
指向规则：谁调用 this就指向谁当没有明确的调用者时，指向window```JavaScriptvar fun = function() {console.log(this);}var obj = {};obj.demo = fun;// 设置为元素的事件btn.onclick = fun;fun(); // 指向window 因为没有明确的调用者obj.demo(); // 指向obj 因为是obj在调用// 当点击btn时 this指向 btn 因为是触发了 btn的该事件
```

字符串

存储： 计算机只能够存储二进制 所以存储字符串时 也需要转为二进制 所以就需要有一个对照表 方便将字符和二进制进行转换 这样的内容叫做编码方式 常见的有 ascii unicode 等

定义字符串的新的方式

    var str = new String("a");console.log(typeof str); // object// 转换为字符串的方式就是str.toString();

包装类型：在面向对象的思想中，一切都得是对象。而JS中有一些基本类型，此时就需要“包装”一下，将这些基本类型包装成对象类型。

字符串的length属性

字符串也有length属性

    var a = "abcdefg";console.log(a[2]); // c

字符串也可以通过下标获取对应的字符

常见的方法

charAt 参数是数字 返回值是该数字所指向的下标字符

    var str = "abcdefg";// 获取指定位置的字符var code = str.charAt(5);console.log(code); // f

charCodeAt 参数是数字 返回值是该数字所指向的下标字符的编码

    var str = "abcdefg";var code = str.charCodeAt(5); console.log(code); // 102

split 参数是分隔符 返回值是以该参数作为切割之后的数组

    var str = "a1b1c1d1e1f"; // 想要以1作为分隔符 将字符串切割成数组 => ["a", "b", "c", "d", "e", "f"];var arr = str.split("1");console.log(arr); // ["a", "b", "c", "d", "e", "f"];// 数组转为字符串// ["a", "b", "c", "d", "e", "f"].join("1"); => a1b1c1d1e1f

substring 该方法用于截取字符串中的一段

    var str = "abcdefg";var str1 = str.substring(1, 2);var str2 = str.substring(1);var str3 = str.substring();var str4 = str.substring(-5, -2);var str5 = str.substring(5, 1);console.log(str1); // bconsole.log(str2); // bcdefgconsole.log(str3); // abcdefgconsole.log(str4); // 空字符串 截取不到console.log(str5); // bcde// 特点：两个参数时，总是从小的截取到大的// 特点：当数值为负数时 不会从后往前数

substr 该方法也用于截取字符串中的一段第一个参数依旧表示截取的开始位置第二个参数表示要截取的字符串的长度

    var str = "abcdefghijkl";var str1 = str.substr(3, 5);console.log(str1);

slice 该方法用于截取字符串的一段第一个参数表示截取的开始位置(包含) 第二个参数表示截取的结束位置(不包含)

    var str = "abcdefghijkl";var str1 = str.slice(1, 5);var str2 = str.slice(5, 1);var str3 = str.slice(-5);console.log(str1); // bcdeconsole.log(str2); // 空字符串 因为截取不到console.log(str3); // hijkl 从后往前截取

indexOf 该方法用于获取数组中第一个从某个位置开始出现的字符串的第一个字符的下标如果找不到就返回-1 第一个参数是被查询的字符串第二个参数是查询的开始位置

    var str = "abcdefgdfdfdf";var index = str.indexOf("df");console.log(index); //

toLowerCase 该方法用于将所有的字符串中的英文小写

    var str = "ABCDEFG,你好,abcde";var str1 = str.toLowerCase();console.log(str1); // abcdefg,你好,abcde

字符串的比较一位一位的比较比较对应位数的字符的ascii码如果相同比较下一位如果不同出结果

    var str = "aA"; // ascii A 65var str1 = "aa"; // ascii a 97 console.log(str > str1); // false

toUpperCase 该方法用于将所有的字符串中的英文大写

    var str = "abc";var str1 = str.toUpperCase();console.log(str1); // ABC

    // replace 该方法用于将字符串中的指定字符(串)替换位指定字符(串)// var str = "今天天气不错，没下雨";// var str1 = str.replace("没", "");// console.log(str1);

郑重声明: 所有的字符串方法都不会改变原字符串

为什么字符串居然能够调用方法，它不是基本数据类型吗？

值类型就是值类型不应该拥有任何方法的

其实…

var a = "str";
var b = a.replace("s", "a");

字符串这个数据类型，在JS中运行时
JS引擎中解析的时候会先把 a 这个"str"值替换为 var s = new String(“str”);
当a.replace方法调用的时候等价于

var s = new String("str");
var b = s.repalce("s", "a");
s = null;

因为真正操作的时候是新生成的对象内部在操作 a所保存的"str"只是作为参数传递了进去在里面复制了一份操作的是这个"副本" 最终会销毁这个生成的对象

函数的传参规则

JS中的函数可以执行时传递参数。那么如果在函数内部修改传递进去的参数，会不会影响到函数外部的值呢？
函数在传递参数时，到底是如何传参的呢？

JS中的数据类型分两种: 基本数据类型，引用数据类型

基本数据类型的数据在传递时，复制传递 也就是复制了一份并传递进去 所以在函数内部，如何操作都只是在操作副本。与外部的数据无关。
引用数据类型的数据在传递时，传递引用 也就是把地址复制了一份并传递进去 所以函数内部是可以得到函数外部的数据保存的地址的，如果在函数内部打点或者方括号修改地址内容，则会影响到函数外部，如果在函数内部使用=修改变量保存的内容，则不会影响函数外部。

    // 在函数内部修改值类型参数var a = 123;function demo(b) {b = 12;}demo(a);console.log(a); // 123

    // 在函数内部使用等号修改引用类型参数var obj = {};function demo(b) {b = 123;}demo(obj);console.log(obj); // {}

    // 在函数内部使用方括号或者点语法修改引用类型参数var obj = {};function demo(b) {b.a = 10;b["b"] = 11;}demo(obj);console.log(obj); // {a: 10, b: 11}

    // 在函数内部先使用方括号或者点语法修改 再使用等号var obj = {};function demo(b) {b.a = 10;b["b"] = 11;b = {};b.c = 12;}demo(obj);console.log(obj); // {a: 10, b: 11}

严格模式

因为JS是一门很随心 很随意的语言 而且因为设计之初遗留了很多不好的地方 这就给开发人员制造了很多困扰 而且也有开发人员给开发人员制造困扰
为了解决这些问题 ES5 中 增加了一个 "严格模式" 严格要求开发人员的代码书写

开启严格模式

在当前作用域的第一行 使用字符串 "use strict";

1 声明变量必须使用var

num = 10;
console.log(num);
// 开启严格模式之后 报错： num is not defined

2 函数的形参不可以重名

function demo(a, a, b, c, d) {console.log(a, b, c, d);
}
demo(1, 2, 3, 4, 5);
// 开启严格模式之后 报错：Uncaught SyntaxError: Duplicate parameter name not allowed in this context

3 不可以使用八进制

var num = 044;
console.log(num); // 36
// 开启严格模式之后 报错：Uncaught SyntaxError: Octal literals are not allowed in strict mode.

4 不可以使用保留字作为变量名

var implements = 123;
console.log(implements);
// 开启严格模式之后 Uncaught SyntaxError: Unexpected strict mode reserved word

5 eval

eval("var a = 10;");
console.log(a);
// 开启严格模式之后 eval执行的代码 不会影响到当前的作用域了 会独立给eval强制开辟一个作用域
// Uncaught ReferenceError: a is not defined

js基础（七）{事件的分类绑定事件函数中的this 字符串函数的传参规则严格模式}相关推荐

GSAP JS基础教程--动画的控制及事件
好多天没有写无博文啦,今天无聊就再写一下! 今天要讲的是TweenLite的一些事件以及,TweenLite动画的控制,TweenMax类似,请自行参考官方文档:http://api.greensoc ...
【原生js】js动态添加dom，如何绑定事件
首先要明白浏览器在加载页面的时候是按顺序来加载的,这样以来就很清楚了,js动态添加dom以后,这些dom并没有绑定事件,这个时候最简单的一个办法就是:将绑定事件的方法封装到一个函数A中,在动态添加完d ...
html与js项目引入react框架之绑定事件
一.react的引入需要引入三个文件 1.react.js https://unpkg.com/react@17/umd/react.development.js https://unpkg.com ...
js实现为新添加元素添加绑定事件
不知道大家在写js的时候碰没碰到过这样一个问题:算了,还是直接上代码就是有时我们使用querySelectAll('li')只能获取html原有的li1,li2,li3标签,如果我们此时创建一个新的 ...
JS笔记--day22. 01.jq取消绑定事件
1.取消绑定事件前需要对事件进行绑定 // 绑定事件$('button').on('click.abc', fun);$('button').on('click.index', function(){ ...
python鼠标选中事件_python对绑定事件的鼠标、按键的判断实例
当多个事件绑定了同一个命令,那么在命令内部根据不同的事件进行处理的时候,怎么确定哪个事件发生了呢,用下面的来检测,经过测试处理tab键和alt键不能识别,其他单个都能被识别. 还有个事件的type属性 ...
java c 事件对比_javacsript绑定事件的三种方式与各自特点
javacsript绑定事件的三种方式与各自特点 javacsript绑定事件的三种方式与各自特点点击打开链接 javacsript绑定事件的三种方式与各自特点 feipeng8848 2017-0 ...
JS基础到高阶知识点总结(每天更新中)
JS基础点总结运算符 // %取两数之间的余数,就是除不尽后得到的一个最终数let a = 7;let b = 4;console.log(a % b);//3// 加 let c = 2let d ...
js定义全局变量 vue页面_在vue项目中实现定义全局变量全局函数操作
写在前面: 如题,在项目中,经常有些函数和变量是需要复用,比如说网站服务器地址,从后台拿到的:用户的登录token,用户的地址信息等,这时候就需要设置一波全局变量和全局函数,这两个设置不太难,而且有一 ...

js基础（七）{事件的分类绑定事件函数中的this 字符串函数的传参规则严格模式}

JS中的常用事件

什么叫做事件

事件的分类

绑定事件

函数中的this

字符串

为什么字符串居然能够调用方法，它不是基本数据类型吗？

函数的传参规则

严格模式

开启严格模式

js基础（七）{事件的分类绑定事件函数中的this 字符串函数的传参规则严格模式}相关推荐

最新文章

热门文章

js基础（七）{事件的分类 绑定事件 函数中的this 字符串 函数的传参规则 严格模式}

JS中的常用事件

什么叫做事件

事件的分类

绑定事件

函数中的this

字符串

为什么字符串居然能够调用方法，它不是基本数据类型吗？

函数的传参规则

严格模式

开启严格模式

js基础（七）{事件的分类 绑定事件 函数中的this 字符串 函数的传参规则 严格模式}相关推荐

最新文章

热门文章

js基础（七）{事件的分类绑定事件函数中的this 字符串函数的传参规则严格模式}

js基础（七）{事件的分类绑定事件函数中的this 字符串函数的传参规则严格模式}相关推荐