یکی از ویژگی‌های مفید jQuery در هنگام توسعه‌ی نرم‌افزارهای تحت وب، رویدادهای( event ) سراسری است. با تعریف این رویدادها می‌توانید در هنگام هر فراخوانی ajax در هر بخش از نرم‌افزار، آگاه شوید و عملیات دلخواه مانند نمایش عبارت «loading» یا جلوگیری از بارگزاری مجدد صفحه یا هر عمل متناسب دیگر را به انجام برسانید
FirstName
firstName
strFirstName lblFirstName
<Company>.<Technology|Produt|Project>[.<Feature>][.<SubNamespace>]
Microsoft.Reporting.WebForms Kara.Support.Manager.Enums Kara.CSS.HQ.WebUI.Configuration
PackageManager , PacakgeConfigGenerator Circle , Utility , Package
CreateConfig , classdata CManager , ClsPackage , Config_Creator , Config1389
CenterCollection , PackageCollection
public delegate void Logger (string log); public delegate void LoggingCallback (object sender, string reason);
AddEventArgs , EditEventArgs , DeleteEventArgs
Adding , Add , Added
public delegate void <EventName>EventHandler (object sender, <EventName>EventArgs e);
public event EventHandler <AddEventArgs> Adding;
DisplayNameAttribute , MessageTypeAttribute
IComponent (اسم) IConnectionProvider (موصوف) ICloneable (صفت)
public enum FileMode {
Append,
Read, …
}
[Flag]
public enum KeyModifiers {
Alt = 1,
Control = 2,
Shift = 4
}
public enum OperationState {
DoneState,
FaultState,
RollbackState
}
AddDays , Save , DeleteRow , BindData , Close , Open
Radius , ReportType , DataSource , Mode , CurrentCenterId
public CenterCollection Centers { get; set; }
if (list.Contains(item)) if (regularExpression.Matches(text)) if (stream.CanSeek) if (context.Created) if (form.Enabled)
if (list.IsContains(item)) if (regularExpression.Match(text)) if (stream.Seekable) if (context.IsCreated) if (form.IsEnabled)
public Color Color { get; set; }
firstName , e , id , packageId , centerName , name
public static MyType operator +(MyType left, MyType right) public static bool operator ==(MyType left, MyType right)
public static MyType operator ++(MyType value)
public static MyType operator /(MyType dividend, MyType divisor)
public static MyType operator -(MyType d1, MyType d2) // incorrect!
Area , DataBinder , PublicCacheName
_centersList _firstName _currentCenter
parameterType , packageOperationTypeId
lblName (Label) txtHeader (TextBox) btnSave (Button)
ArgumentNullException , InvalidOperaionException
System.Data
<Company>.<Component>.dll <Company>.<Project|Product|Technology>.<Component>.dll
Microsoft.CSharp.dll , Kara.CSS.Manager.dll
public int IComparer<T> {…}
public delegate bool Predicate<T> (T item)
public int ISessionChannel<TSession> {…}
public delegate TOutput Converter<TInput, TOutput> (TInput from)
public class Nullable<T> {…}
public class List<T> {…}
ArgumentExceptionIllegalCharacters ArgumentExceptionInvalidName ArgumentExceptionFileNotFound
|
Pascal Casing |
camel Casing |
Wrong |
|
Callback |
callback |
CallBack |
|
BitFlag |
bitFlag |
Bitflag / bitflag |
|
Canceled |
canceled |
Cancelled |
|
DoNot |
doNot |
Donot / Don’t |
|
|
|
|
|
Endpoint |
endpoint |
EndPoint / endPoint |
|
FileName |
fileName |
Filename / filename |
|
Gridline |
gridline |
GridLine / gridLine |
|
Hashtable |
hashtable |
HashTable / hashTable |
|
Id |
id |
ID |
|
Indexes |
indexes |
Indices |
|
LogOff |
logOff |
Logoff / LogOut ! |
|
LogOn |
logOn |
Logon / LogIn ! |
|
SignOut |
signOut |
Signout / SignOff |
|
SignIn |
signIn |
Signin / SignOn |
|
Metadata |
metadata |
MetaData / metaData |
|
Multipanel |
multipanel |
MultiPanel / multiPanel |
|
Multiview |
multiview |
MultiView / multiView |
|
Namespace |
namespace |
NameSpace / nameSpace |
|
Ok |
ok |
OK |
|
Pi |
pi |
PI |
|
Placeholder |
placeholder |
PlaceHolder / placeHolder |
|
UserName |
username |
Username / username |
|
WhiteSpace |
whiteSpace |
Whitespace / whitespace |
|
Writable |
writable |
Writeable / writeable |
public class Color {
…
public static Color FromArgb(…)
{ … }
}
ایجاد ساختار ابتدایی پروژه
برای ساخت پروژه، به خط فرمان مراجعه کرده و با دستور زیر، یک پروژه‌ی react از نوع typescript را ایجاد میکنیم.
npx create-react-app todo-mobx --template typescript cd todo-mobx
برای توسعه‌ی این مثال، از محیط توسعه‌ی VSCode استفاده میکنیم. اگر VSCode بر روی سیستم شما نصب باشد، در همان مسیری که خط فرمان باز است، دستور زیر را اجرا کنید؛ پروژه‌ی شما در VSCode باز میشود:
code
سپس در محیط VSCode، دکمه‌های ctrl+` را فشرده (ctrl+back-tick) و دستورات زیر را در ترمینال ظاهر شده وارد کنید:
npm install --save-dev typescript @types/node @types/react @types/react-dom @types/jest npm install mobx mobx-react-lite --save
در ادامه برای استایل بندی بهتر برنامه از کتابخانه‌های bootstrap و font-awesome استفاده میکنیم:
npm install bootstrap --save npm install font-awesome --save
سپس فایل index.tsx را باز کرده و دو خط زیر را به آن اضافه میکنیم:
import "bootstrap/dist/css/bootstrap.css"; import "font-awesome/css/font-awesome.css";
کتابخانه‌ی MobX، از تزئین کننده‌ها یا decorators استفاده میکند. بنابراین نیاز است به tsconfig پروژه مراجعه کرده و خط زیر را به آن اضافه کنیم:
"compilerOptions": {
.... ,
"experimentalDecorators": true
}
ایجاد مخازن حالت MobX
در ادامه نیاز است storeهای MobX را ایجاد کنیم و بعد آنها را به react اتصال دهیم. بدین منظور یک پوشه‌ی جدید را در مسیر src، به نام stores ایجاد میکنیم و سپس فایل جدیدی را به نام todo-item.ts در آن با محتوای زیر ایجاد میکنیم:
import { observable, action } from "mobx";
export default class TodoItem {
id = Date.now();
@observable text: string = '';
@observable isDone: boolean = false;
constructor(text: string) {
this.text = text;
}
@action
toggleIsDone = () => {
this.isDone = !this.isDone
}
@action
updateText = (text: string) => {
this.text = text;
}
}
در همان مسیر stores، فایل دیگری را نیز به نام todo-list.ts، با محتوای زیر ایجاد میکنیم:
import { observable, computed, action } from "mobx";
import TodoItem from "./todo-item";
export class TodoList {
@observable.shallow list: TodoItem[] = [];
constructor(todos: string[]) {
todos.forEach(this.addTodo);
}
@action
addTodo = (text: string) => {
this.list.push(new TodoItem(text));
}
@action
removeTodo = (todo: TodoItem) => {
this.list.splice(this.list.indexOf(todo), 1);
};
@computed
get finishedTodos(): TodoItem[] {
return this.list.filter(todo => todo.isDone);
}
@computed
get openTodos(): TodoItem[] {
return this.list.filter(todo => !todo.isDone);
}
} توضیحات:
مفهوم observable@: کل شیء state را به صورت یک شیء قابل ردیابی JavaScript ای ارائه میکند.
مفهوم computed@: این نوع خواص، مقدار خود را زمانیکه observableهای وابسته‌ی به آنها تغییر کنند، به روز رسانی میکنند.
مفهوم action@: جهت به روز رسانی state و سپس نمایش تغییرات یا نمایش نمونه‌ی دیگری در DOM می‌باشند.
import { createContext, useContext } from "react";
import { TodoList } from "../stores/todo-list";
export const StoreContext = createContext<TodoList>({} as TodoList);
export const StoreProvider = StoreContext.Provider;
export const useStore = (): TodoList => useContext(StoreContext); import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import "bootstrap/dist/css/bootstrap.css";
import "font-awesome/css/font-awesome.css";
import { TodoList } from './stores/todo-list';
import { StoreProvider } from './providers/store-provider';
const todoList = new TodoList([
'Read Book',
'Do exercise',
'Watch Walking dead series'
]);
ReactDOM.render(
<StoreProvider value={todoList}>
<App />
</StoreProvider>
, document.getElementById('root'));
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister(); import React, { useState } from 'react';
import { useStore } from '../providers/store-provider';
export const TodoNew = () => {
const [newTodo, setTodo] = useState('');
const todoList = useStore();
const addTodo = () => {
todoList.addTodo(newTodo);
setTodo('');
};
return (
<div className="input-group mb-3">
<input type="text" className="form-control" placeholder="Add To do" value={newTodo} onChange={(e) => setTodo(e.target.value)} />
<div className="input-group-append">
<button className="btn btn-success" type="submit" onClick={addTodo}>Add Todo</button>
</div>
</div>
)
}; import React from 'react';
import { TodoItem } from "./TodoItem";
import { useObserver } from "mobx-react-lite";
import { useStore } from '../providers/store-provider';
export const TodoList = () => {
const todoList = useStore();
return useObserver(() => (
<div>
<h1>Open Todos</h1>
<table className="table">
<thead className="thead-dark">
<tr>
<th>Name</th>
<th className="text-left">Do It?</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{
todoList.openTodos.map(todo =>
<tr key={`${todo.id}-${todo.text}`}>
<TodoItem todo={todo} />
</tr>)
}
</tbody>
</table>
<h1>Finished Todos</h1>
<table className="table">
<thead className="thead-light">
<tr>
<th>Name</th>
<th className="text-left">Do It?</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{
todoList.finishedTodos.map(todo =>
<tr key={`${todo.id}-${todo.text}`}>
<TodoItem todo={todo} />
</tr>)
}
</tbody>
</table>
</div>
));
}; import React, { useState } from 'react';
import TodoItemClass from "../stores/todo-item";
import { useStore } from '../providers/store-provider';
interface Props {
todo: TodoItemClass;
}
export const TodoItem = ({ todo }: Props) => {
const todoList = useStore();
const [newText, setText] = useState('');
const [isEditing, setEdit] = useState(false);
const saveText = () => {
todo.updateText(newText);
setEdit(false);
setText('');
};
return (
<React.Fragment>
{
isEditing ?
<React.Fragment>
<td>
<input className="form-control" placeholder={todo.text} type="text" onChange={(e) => setText(e.target.value)} />
</td>
<td></td>
<td>
<button className="btn btn-xs btn-success " onClick={saveText}>Save</button>
</td>
</React.Fragment>
:
<React.Fragment>
<td>
{todo.text}
</td>
<td className="text-left">
<input className="form-check-input" type="checkbox" onChange={todo.toggleIsDone} defaultChecked={todo.isDone}></input>
</td>
<td>
<button className="btn btn-xs btn-warning " onClick={() => setEdit(true)}>
<i className="fa fa-edit"></i>
</button>
<button className="btn btn-xs btn-danger ml-2" onClick={() => todoList.removeTodo(todo)}>
<i className="fa fa-remove"></i>
</button>
</td>
</React.Fragment>
}
</React.Fragment>
)
}; 
<style>
:link {
color: red;
}
</style>
<a href="page1.html">Link 1</a>
<a>Link 2</a>
<a href="page2.html">Link 3</a> | | | | | | Selector | نسخه CSS |
| 3.1 | 9.6 | 7.0 | 2.0 | 4.0 | :link | 1 |
<style>
:visited {
color: green;
}
</style>
<a href="page1.html">Link 1</a>
<a>Link 2</a>
<a href="page2.html">Link 3</a> | | | | | | Selector | نسخه CSS |
| 3.1 | 9.6 | 7.0 | 2.0 | 4.0 | :visited | 1 |
<style>
:focus {
background: yellow;
}
</style>
<input type="text"/>
<input type="password"/>
<input type="text" /> | | | | | | Selector | نسخه CSS |
| 3.1 | 9.6 | 8.0 | 2.0 | 4.0 | :focus | 2 |
<style>
input:hover {
background: yellow;
}
</style>
<input type="text" />
<input type="password" />
<input type="text" /> | | | | | | Selector | نسخه CSS |
| 3.1 | 9.6 | 7.0 | 2.0 | 4.0 | :hover | 1 |
<style>
button:active {
background: yellow;
}
</style>
<button>Button 1</button>
<button>Button 2</button> | | | | | | Selector | نسخه CSS |
| 3.1 | 9.6 | 7.0 | 2.0 | 4.0 | :active | 1 |
<style>
:target {
color: green;
}
</style>
<h2><a href="#part1">Link 1</a></h2>
<h2><a href="#part2">Link 2</a></h2>
<p>This is a paragraph</p>
<h1><a name="part1">Part 1</a></h1>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Maecenas porttitor congue massa.
Fusce posuere, magna sed pulvinar ultricies,
purus lectus malesuada libero, sit amet commodo
magna eros quis urna.
</p>
<h1><a name="part2">Part 2</a></h1>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Maecenas porttitor congue massa.
Fusce posuere, magna sed pulvinar ultricies,
purus lectus malesuada libero, sit amet commodo
magna eros quis urna.
</p> | | | | | | Selector | نسخه CSS |
| 3.2 | 9.6 | 9.0 | 3.5 | 4.0 | :target | 3 |
<style>
:first-letter {
font-size: xx-large;
}
</style>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Maecenas porttitor congue massa.
Fusce posuere, magna sed pulvinar ultricies,
purus lectus malesuada libero, sit amet commodo
magna eros quis urna.
</p> | | | | | | Selector | نسخه CSS |
| 1.0 | 7.0 | 9.0 | 1.0 | 1.0 | :first-letter | 1 |
<style>
:first-line {
color: red;
}
</style>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Maecenas porttitor congue massa. Fusce posuere,
magna sed pulvinar ultricies,
purus lectus malesuada libero, sit amet commodo magna eros
quis urna. Nunc viverra imperdiet enim. Fusce est.
Vivamus a tellus. Pellentesque habitant morbi tristique senectus
et netus et malesuada fames ac turpis egestas. Proin pharetra
nonummy pede. Mauris et orci. Aenean nec lorem.
</p> | | | | | | Selector | نسخه CSS |
| 1.0 | 7.0 | 9.0 | 1.0 | 1.0 | :first-letter | 1 |
<style>
:empty {
background: gray;
}
</style>
<table border="1" cellpadding="10" cellspacing="10">
<tr>
<td>A</td>
<td>B</td>
<td></td>
</tr>
<tr>
<td>C</td>
<td></td>
<td>D</td>
</tr>
<tr>
<td></td>
<td>E</td>
<td>F</td>
</tr>
</table> | | | | | | Selector | نسخه CSS |
| 3.2 | 9.6 | 9.0 | 3.5 | 4.0 | :target | 3 |
<style>
:dir(rtl) {
color: red;
}
</style>
<div dir="rtl">متن 1</div>
<div>متن 2</div> | | | | | | Selector | نسخه CSS |
| No | No | No | No | No | :dir(direction) | 4 |
<style>
:lang(en) {
color: red;
}
</style>
<div lang="en">Text 1</div>
<div>Text 2</div>
<div lang="en">Text 3</div> | | | | | | Selector | نسخه CSS |
| 3.1 | 9.6 | 8.0 | 2.0 | 4.0 | :lang(language1) | 2 |
| | | | | | Selector | نسخه CSS |
| No | No | No | No | No | :lang(language1, language2,...) | 4 |
تا به اینجا مثال‌هایی که زده‌ایم تاثیر کامپوننت‌های React را بر روی UI، نشان دادند. در این بخش به رویدادهای سمت UI و ورودی‌های کاربر میپردازیم.
React روش مدیریت رویدادهای خودش را دارد و به آنها رویدادهای Synthetic یا ترکیبی گفته میشود. در زیر مقایسه‌ای داریم از رویدادهای معمول در JavaScript و رویدادهای React و تفاوت‌ها را بررسی میکنیم.
<!-- HTML Buttons -->
<button type="button" onclick="console.log('Button Clicked')">Click Me</button>
// React Buttons
<button type="button" onClick={console.log("Button Clicked")}>Click Me</button> رفتار رویدادهای React در مرورگرهای مختلف یکسان است. برای مثال رویداد onChange هر تغییری را برای هر نوع تگ ورودی اعمال میکند. هر کلیدی که در یک input یا textarea زده شود، اگر یک check box را انتخاب یا از انتخاب خارج کنیم و یا اگر موردی را از یک drop-down انتخاب کنیم، React رویداد onChange را اجرا میکند. React اکثر رویدادهای مرسوم را پوشش میدهد و همچنین رویدادهایی را برای کار با کلیپ‌برد، رسانه‌های مختلف و تصاویر دارد. برای اطلاعات بیشتر به مستندات آن رجوع کنید.
وقتی با کتابخانه React کار میکنیم، همه چیز مجازی اتفاق می‌افتد؛ مانند ساخت تگ و نمایش آنها، همچنین مدیریت تگ‌ها و رویدادها. اما به این معنا نیست که ارتباط React با HTML DOM در مرورگر قطع است. اگر لازم باشد به HTML DOM در کامپوننت‌ها دسترسی داشته باشیم میتوانیم از خاصیت ref در React استفاده کنیم. برای مثال فرض کنید یک ورودی را برای ایمیل به‌صورت <input type="email" /> تعریف کرده‌ایم. میخواهیم پیش از ذخیره بدانیم آیا داده وارد شده به فرمت ایمیل هست یا نه.
const EmailForm = React.createClass({
clickHandler() {
if (this.inputEmail.checkValidity())
console.log("Email is OK to save it.");
else
console.log("Email is not in right format.");
},
render() {
return (
<div>
<input type="email" ref={inputEmail => this.inputEmail = inputEmail} />
<button type="submit" onClick={this.clickHandler}>Save</button>
</div>
)
} در مثال بالا clickHandler وظیفه مدیریت رویداد کلیک دکمه را به عهده دارد. در ادامه، وقتی از خاصیت ref در تگ input استفاده میکنیم و مقدار آن را یک تابع قرار میدهیم، React این تابع را زمانیکه کامپوننت به طور کامل در HTML DOM ساخته شد، اجرا میکند. React همچنین ارجاعی را به عنوان پارامتر این تابع به DOM همراه با تابع ارسال میکند (inputEmail). داخل تابع ref میتوانیم به نمونه ساخته شده از کامپوننت در DOM دسترسی داشته باشیم. inputEmail که به صورت ارجاع به تابع فرستاده شده، تگ ساخته شده input را برمیگرداند، در نتیجه میتوانیم در کامپوننت به آن دسترسی داشته باشیم.
اگر از کامپوننت‌های Sateful که دارای وضعیت هستند استفاده میکنیم، میتوانیم وضعیت کامپوننت را بر اساس ورودی‌های کاربر تغییر دهیم. مثال بالا را به این شکل تغییر میدهیم که در ابتدا وضعیت کامپوننت، یک ایمیل پیشفرض باشد و اگر کاربر آدرس متفاوتی را وارد کرد، آدرس جدید به عنوان وضعیت جدید کامپوننت در نظر گرفته شود.
const EmailForm = React.createClass({
getInitialState() {
return {
currentEmail: this.props.currentEmail
}
},
setCurrentEmailState(se) {
this.setState({ currentEmail: se.target.value });
},
clickHandler() {
if (this.inputEmail.checkValidity())
console.log("Email is OK to save it.");
else
console.log("Email is not in right format.");
},
render() {
return (
<div>
<input type="email" ref={inputEmail => this.inputEmail = inputEmail}
value={this.state.currentEmail} onChange={this.setCurrentEmailState} />
<button type="submit" onClick={this.clickHandler}>Save</button>
</div>
)
}
}) در خط 20 از مثال بالا با قرار دادن مقدار value برابر با ایمیل جاری (وضعیت کامپوننت)، کاربر آدرس پیشفرض را در input میبیند، اما هیچ تغییری را نمیتواند در آن ایجاد کند و input عملا تبدیل به یک تگ فقط خواندنی میشود. علت این است که React دو وضعیت را ایجاد کرده، یکی در حافظه به عنوان وضعیت پیشفرض و دیگری وضعیتی که در DOM ساخته. وقتی در سطح DOM تغییری را ایجاد میکنیم، React به صورت خودکار متوجه آن نمیشود و ما باید با روشی React را در جریان این تغییرات قرار دهیم! برای این کار رویداد onChange را برای تگی که قرار است تغییر کند پیاده‌سازی میکنیم. در مثال بالا متد setCurrentEmailState و رویداد onChange برای همین منظور به کار گرفته شده‌اند.
در قسمت بعد که آخرین قسمت است، به مسئله چرخه زندگی (Lifecycle) کامپوننت‌های React میپردازیم.
<!DOCTYPE html> <html> <head> <title>event propagation demo</title> </head> <body> <section> <h1>nested divs</h1> <div>one <div>child of one <div>child of child of one</div> </div> </div> </section> </body> </html>
1.window 2.document 3.<html> 4.<body> 5.<section> 6.<div>one 7.<div>child of one 8.<div>child of child of one
9.<div>child of child of one 10.<div>child of one 11.<div>one 12.<section> 13.<body> 14.<html> 15.document 16.window
<div> <button type="button">do something</button> </div> <form method="POST" action="/user"> <label>Enter user name: <input name="user"> </label> <button type="submit">submit</button> </form>
// submits the form
$('FORM').trigger('submit');
// submits the form by clicking the button
$('BUTTON[type="submit"]').trigger('click');
// focuses the text input
$('INPUT').trigger('focus');
// removes focus from the text input
$('INPUT').trigger('blur'); // submits the form
$('FORM').submit();
// submits the form by clicking the button
$('BUTTON[type="submit"]').click();
// focuses the text input
$('INPUT').focus();
// removes focus from the text input
$('INPUT').blur(); // clicks the first button - the click event does not bubble
$('BUTTON[type="button"]').triggerHandler('click'); // submits the form
document.querySelector('FORM').submit();
// submits the form by clicking the button
document.querySelector('BUTTON[type="submit"]').click();
// focuses the text input
document.querySelector('INPUT').focus();
// removes focus from the text input
document.querySelector('INPUT').blur(); var clickEvent;
if (typeof Event === 'function') {
clickEvent = new Event('click', {bubbles: false});
}
else {
clickEvent = document.createEvent('Event');
clickEvent.initEvent('click', false, true);
}
document.querySelector('BUTTON[type="button"]').dispatchEvent(clickEvent); // Triggers a custom "image-removed" element,
// which bubbles up to ancestor elements.
$libraryElement.trigger('image-removed', {id: 1}); var event = new CustomEvent('image-removed', {
bubbles: true,
detail: {id: 1}
});
libraryElement.dispatchEvent(event); var event = document.createEvent('CustomEvent');
event.initCustomEvent('image-removed', false, true, {id: 1});
libraryElement.dispatchEvent(event); var event;
// If the `CustomEvent` constructor function is not supported,
// fall back to `createEvent` method.
if (typeof CustomEvent === 'function') {
event = new CustomEvent('image-removed', {
bubbles: true,
detail: {id: 1}
});
}
else {
event = document.createEvent('CustomEvent');
event.initCustomEvent('image-removed', false, true, {
id: 1
});
}
libraryElement.dispatchEvent(event); $(window).on('resize', function() {
// react to new window size
}); // remove all resize listeners - usually a bad idea
$(window).off('resize'); var resizeHandler = function() {
// react to new window size
};
$(window).on('resize', resizeHandler);
// ...later
// remove only our resize handler
$(window).off('resize', resizeHandler); $(someElement).one('click', function() {
// handle click event
}); <button onclick="handleButtonClick()">click me</button>
buttonEl.onclick = function() {
// handle button click
}; buttonEl.addEventListener('click', function() {
// handle button click
}); window.addEventListener('resize', function() {
// react to new window size
}); var resizeHandler = function() {
// react to new window size
};
window.addEventListener('resize', resizeHandler);
// ...later
// remove only our resize handler
window.removeEventListener('resize', resizeHandler); someElement.addEventListener('click', function(event) {
// handle click event
}, { once: true }); var clickHandler = function() {
// handle click event
// ...then unregister handler
someElement.removeEventListener('click', clickHandler);
};
someElement.addEventListener('click', clickHandler); $(window).on('mousedown', function(event) {
event.preventDefault();
}); window.addEventListener('mousedown', function(event) {
event.preventDefault();
}); $someElement.on('click', function(event) {
event.stopPropagation();
}); // stop propagation during capturing phase
someElement.addEventListener('click', function(event) {
event.stopPropagation();
}, true); // stop propagation during bubbling phase
someElement.addEventListener('click', function(event) {
event.stopPropagation();
}); $someElement.on('click', function(event) {
event.stopImmediatePropagation();
}); someElement.addEventListener('click', function(event) {
event.stopImmediatePropagation();
}); $uploaderElement.trigger('uploadError', {
filename: 'picture.jpeg'
}); $uploaderParent.on('uploadError', function(event, data) {
showAlert('Failed to upload ' + data.filename);
}); // send the failed filename w/ an error event
var event = new CustomEvent('uploadError', {
bubbles: true,
detail: {filename: 'picture.jpeg'}
});
uploaderElement.dispatchEvent(event);
// ...and this is a listener for the event
uploaderParent.addEventListener('uploadError', function(event) {
showAlert('Failed to upload ' + event.detail.filename);
}); // send the failed filename w/ an error event
var event = document.createEvent('CustomEvent');
event.initCustomEvent('uploadError', true, true, {
filename: 'picture.jpeg'
});
uploaderElement.dispatchEvent(event);
// ...and this is a listener for the event
uploaderParent.addEventListener('uploadError', function(event) {
showAlert('Failed to upload ' + event.detail.filename);
}); $(window).on('load', function() {
// page is fully rendered
}); window.addEventListener('load', function() {
// page is fully rendered
}); $(document).ready(function() {
// markup is on the page
});
//or
$(function() {
// markup is on the page
}); document.addEventListener('DOMContentLoaded', function() {
// markup is on the page
}); $('IMG').on('load', function() {
// image has successfully loaded
});
$('IMG').on('error', function() {
// image has failed to load
}); document.querySelector('IMG').addEventListener('load', function() {
// image has successfully loaded
});
document.querySelector('IMG').addEventListener('error', function() {
// image has failed to load
}); $(window).on('beforeunload', function() {
return 'Are you sure you want to unload the page?';
}); window.addEventListener('beforeunload', function(event) {
var message = 'Are you sure you want to unload the page?';
event.returnValue = message;
return message;
}); D:\electron\test1>npm init
npm i electron-prebuilt --save-dev
atom .
{
"name": "electron",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "electron ."
},
"author": "",
"license": "ISC"
} const electron = require('electron');
const {app} = electron;
const {BrowserWindow} = electron; let win;
app.on('ready', function() {
// Create the browser window.
win = new BrowserWindow({
width: 800,
height: 600
});
}); npm start
win.loadURL(`file://${__dirname}/index.html`); 
PM> Install-Package toastr
toastr.info("نمایش یک پیام - info");
toastr.success("نمایش یک پیام - success");
toastr.error("نمایش یک پیام - error");
toastr.warning("نمایش یک پیام - warning"); 
toastr.success("نمایش یک پیام - success", "عنوان"); toastr.options = {
tapToDismiss: true,
toastClass: 'toast',
containerId: 'toast-container',
debug: false,
showMethod: 'fadeIn', //fadeIn, slideDown, and show are built into jQuery
showDuration: 300,
showEasing: 'swing', //swing and linear are built into jQuery
onShown: undefined,
hideMethod: 'fadeOut',
hideDuration: 1000,
hideEasing: 'swing',
onHidden: undefined,
extendedTimeOut: 1000,
iconClasses: {
error: 'toast-error',
info: 'toast-info',
success: 'toast-success',
warning: 'toast-warning'
},
iconClass: 'toast-info',
positionClass: 'toast-top-right',
timeOut: 5000, // Set timeOut and extendedTimeOut to 0 to make it sticky
titleClass: 'toast-title',
messageClass: 'toast-message',
target: 'body',
closeHtml: '<button>×</button>',
newestOnTop: true,
preventDuplicates: false,
progressBar: false
}; public class NotificationHub : Hub
{
private readonly IProductService _productService;
public NotificationHub(IProductService productService)
{
_productService = productService;
}
public void SendNotification()
{
Clients.Others.ShowNotification(_productService.GetLastProduct());
}
} var notify = $.connection.notificationHub;
notify.client.showNotification = function (data) {
toastr.info("رکورد جدیدی ثبت گردید جهت نمایش اینجا کلیک کنید");
};
$.connection.hub.start().done(function () {
@{
if (ViewBag.NotifyUsers)
{
<text>notify.server.sendNotification();</text>
}
}
}); var positionClasses = {
topRight: 'toast-top-right',
bottomRight: 'toast-bottom-right',
bottomLeft: 'toast-bottom-left',
topLeft: 'toast-top-left',
topCenter: 'toast-top-center',
bottomCenter: 'toast-bottom-center'
};
var notify = $.connection.notificationHub;
notify.client.showNotification = function (data) {
toastr.options = {
showDuration: 300,
positionClass: positionClasses.bottomRight,
onclick: function () {
$('#table tr:last').after("<tr>" +
"<td>" + data.Title + "</td>" +
"<td>" + data.Description + "</td>" +
"<td>" + data.Price + "</td>" +
"<td>" + data.Category + "</td>" +
"<td> </td>" +
"</tr>");
}
};
toastr.info("رکورد جدیدی ثبت گردید جهت نمایش اینجا کلیک کنید");
};
$.connection.hub.start().done(function () {
@{
if (ViewBag.NotifyUsers)
{
<text>notify.server.sendNotification();</text>
}
}
}); onclick: function () {
$('#table tr:last').after("<tr>" +
"<td>" + data.Title + "</td>" +
"<td>" + data.Description + "</td>" +
"<td>" + data.Price + "</td>" +
"<td>" + data.Category + "</td>" +
"<td> </td>" +
"</tr>");
} data {Id: 12, Title: "Item1", Description: "Des", Price: 100000, Category: 0} export const Button = ({ onClick }: Props) => {
return <button onClick={onClick}>Click Me</button>;
}; 
import React from "react";
type Props = {
onClick: (e: React.MouseEvent) => void;
};
export const Button = ({ onClick }: Props) => {
return <button onClick={onClick}>Click Me</button>;
}; <Button
onClick={(e) => {
e.preventDefault();
console.log(e);
}}
/> 
import React from "react";
type Props = {
onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
};
export const Button = ({ onClick }: Props) => {
return <button onClick={onClick}>Click Me</button>;
}; 
import React from "react";
type Props = {
onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
onChange?: (e: React.FormEvent<HTMLInputElement>) => void;
};
export const Button = ({ onClick, onChange }: Props) => {
return (
<>
<input onChange={onChange} />
<button onClick={onClick}>Click Me</button>
</>
);
}; {
"dependencies": {
"@types/react": "^16.9.35",
"@types/react-dom": "^16.9.8",
}, import React, { FormEvent } from "react";
type Props = {
onChange?: (e: FormEvent<HTMLInputElement>) => void;
}; <Button
onClick={(e) => {
e.preventDefault();
console.log(e);
}}
>
Hello world!
</Button> import React, { FormEvent } from "react";
type Props = {
onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
onChange?: (e: FormEvent<HTMLInputElement>) => void;
children: string;
};
export const Button = ({ onClick, onChange, children }: Props) => {
return (
<>
<input onChange={onChange} />
<button onClick={onClick}>{children}</button>
</>
);
}; <Button
onClick={(e) => {
e.preventDefault();
console.log(e);
}}
>
<img src={logo} className="App-logo" alt="logo" />
</Button> 
import React, { FormEvent } from "react";
type Props = {
onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
onChange?: (e: FormEvent<HTMLInputElement>) => void;
// children: HTMLImageElement;
};
export const Button: React.FC<Props> = ({ onClick, onChange, children }) => {
return (
<>
<input onChange={onChange} />
<button onClick={onClick}>{children}</button>
</>
);
}; 
پیاده سازی راست کلیک در برای Table در ASP.NET
